分一下两种情况:
1.单行文字
设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.
这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围.
插入代码:
div{
height: 20px;
line-height: 20px;
overflow: hidden;
}
2.多行文字
很简单,只要设定一样的 padding-bottom 和 padding-top 就可以了
插入代码:
div{
padding-top: 20px;
padding-bottom: 20px;
}
这种方法同时支持块级和内联极元素以及非文本内容,包括图片等等,也支持所有浏览器,不足的就是不能固定高度
如果哪位朋友还有什么好用的方法,希望能贴出不,大家共同分享!
如何使图片在DIV中垂直居中,可以用背景的方法。如下:body{
BACKGROUND:url(http://www.piaoyi.org/images/logo.gif) #FFF no-repeat center;
}
<wbr><wbr><wbr> 关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"。</wbr></wbr></wbr>
分享到:
相关推荐
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
DIV+CSS 图片垂直居中效果
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
DIV+CSS上下左右绝对居中
div中多行文字垂直居中
NULL 博文链接:https://javapub.iteye.com/blog/709361
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
NULL 博文链接:https://zhouyao.iteye.com/blog/417432
DIV内多行文字垂直居中,并且超过固定行数时显示省略号
css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)
div框水平垂直居中跟内容垂直居中
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
CSS解决 DIV 3列居中难题 .pdf
第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.5 段落实例:百度搜索 第4章 用CSS设置...
css控制div中元素居中的示例.pdf
DIV+CSS中让布局居中.docx
js+CSS实现弹出居中背景半透明div层的方法.docx
css3中块元素居中是前端开发中常见的问题,块元素可以分为定宽块元素、不定宽块元素和多行文本、图片、块状元素的竖直居中等情况。下面我们将详细介绍每种情况下的解决方法。 一、定宽块元素居中 定宽块元素可以...