该博客探讨了如何使用CSS解决div元素中多行文本的垂直居中问题。作者提供了兼容IE和Firefox的解决方案，涉及CSS的display属性、position属性以及vertical-align属性的使用。代码示例中，通过创建一个相对定位的外部容器和绝对定位的内部元素，实现了文本的垂直居中。此外，博客还强调了vertical-align属性的作用范围和在不同浏览器中的表现。
div ul li span中的文字垂直居中问题 (含多行文本自动居中)
2018-09-15
div是个容器，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。表格的单元格相当于一行，所以就能垂直居中
对于单行文本：垂直居中中的方法比较简单，可能设line-hight与div 的高度一样就行了
对于多行文本，比较麻烦：可以参考一下这个
代码如下:
对于div中文字可以使其垂直居中,我要兼容IE和firefox!
css文件如下:
div.demo{width: 800px;margin: 12px auto;border: 1px solid #1987df;color: inherit;background: #CEE7FF}
div#outerbox{height: 300px;position: relative;display:table}
div#outerbox div{position: absolute;top: 50%;left: 0}
div#outerbox p{position: relative;top: -50%;margin: 24px;text-indent: 0; font-size:14px;}
div#outerbox>div{display:table-cell;vertical-align:middle;position:static}
这个你可以参考一下，新建一个css文件，把上面的样式copy进去，再在html文件里加入引用就ok了!
补充一点：在IE6.0和Mozilla firefox浏览器中垂直居中测试成功
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。
http://www.pinlue.com/style/images/nopic.gif
扫一扫
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
