分一下两种情况:
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+CSS上下左右绝对居中
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学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
js+CSS实现弹出居中背景半透明div层的方法.docx
CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中