[已关闭问题] div中的文字垂直居中问题
对于div中文字可以使其水平居中,设置了vertical-align:middle;为什么不能垂直居中?
我要兼容IE和firefox!
(5)
|
padding-top:auto, padding-bottom:auto 装到div里面. 看这篇文章： http://www.cnblogs.com/JustinYoung/archive/2008/01/18/recruitment.html 这个我也很想知道~ 如果旁边有张图比如 18PX高的~ 我的文字想居中对齐都实现不了 只能顶部或者底部! 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浏览器中垂直居中测试成功 闯哥来了,欢迎 |
|
4个月前 侯垒 : <div style="width:500px;height:400px;margin:0 auto;border:solid 1px green;padding-top:auto;padding-bottom:auto;"> 对于div中文字可以使其水平居中,设置了vertical-align:middle;为什么不能垂直居中?我要兼容IE和firefox! </div> 大哥这样好像不行呀!是不是我的理解有错误呀? |
|
|
4个月前 侯垒 : @lagger 我不知道你为什么用这么多重复的CSS属性,但是我照你说的去做,还是不行.并没有起到垂直居中的效果,我用IE6和IE7,Firefox都不行. 暂时用了这样的效果,还是用到了表格. <div style="width:500px;height:396px;margin:0 auto;border:solid 1px green;"> <table> <tr> <td style="width:500px;height:396px;" valign="middle"> 通常在制作网站首页时需要使页面内容在水平和垂直方向上都居中。表格布局时代常用的方法是内容之前添加换行。实际上通过CSS有更方便的办法。这个方法出自creamu.com。先来看看代码和效果吧。 </td></tr> </table> </div> |
|
4个月前 lagger : 呵呵，这种方法我在IE6和Firefox测试都成功了呀,我没有装ie7没有测试呀，是不是你的css样式没有加对呀，你再仔细看一下，css样式没有重复， div#outerbox div#outerbox div div#outerbox p 他们是不同的呀 |
|
|
4个月前 lagger : @任力 呵呵，来看看你呀！！你测试一下我上面的代码行不行？？ |
|
|
4个月前 侯垒 : @ lagger 呵呵,不好意思,我只复制了你的CSS代码,没有看你写的html代码标记,就直接用了一个div来做的,所以不行,然而对你的 div#outerbox div#outerbox div div#outerbox p 才感觉到奇怪的. 刚才我对你的代码重新做了测试,要IE7里面,div中的文字会跑到div的上面,所以这段代码不能在IE7下来实现这个功能,在IE6、Firefox、opera测试通过了。 在IE6下面如果用鼠标去选中div中的文字，你会发现不是很优雅。 我感觉如果就为了实现一个简单的垂直居中，就写了这么多的东西，实在是有损效率，还不如直接用一个table中的单元格来做。 很感谢你给我提供的答案。 |