div中的文字垂直居中问题
0
悬赏园豆：10
[已关闭问题]
关闭于 2008-03-16 09:58
<P>对于div中文字可以使其水平居中,设置了vertical-align:middle;为什么不能垂直居中?</P>
<P>我要兼容IE和firefox!</P>
所有回答(5)
0
padding-top:auto, padding-bottom:auto 装到div里面.
0
看这篇文章：
http://www.cnblogs.com/JustinYoung/archive/2008/01/18/recruitment.html
0
这个我也很想知道~ 如果旁边有张图比如 18PX高的~ 我的文字想居中对齐都实现不了 只能顶部或者底部!
0
div是个容器，一个Box中由很多行很多元素组成，vertical-align只作用于在同一行内的元素，它的垂直并不是相对于整个Box而言的。表格的单元格相当于一行，所以就能垂直居中
对于单行文本：垂直居中中的方法比较简单，可能设line-hight与div 的高度一样就行了<div style="hight:100px; line-hight:100px; overflow: hidden;">即可
对于多行文本，比较麻烦：可以参考一下这个
代码如下:
<div class="demo" id="outerbox">
<div >
<p>对于div中文字可以使其垂直居中,我要兼容IE和firefox!
</p>
</div>
</div>
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浏览器中垂直居中测试成功
0
闯哥来了,欢迎
