改变元素display属性的垂直居中方法。

改变元素display属性的垂直居中方法。作者：ONEBOYS

之前也有搜集过纯CSS的几种方法。
但觉得没有下面的好。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap { width:800px; height:500px; display:table-cell;/* for opera */ vertical-align:middle;/* for opera */ text-align:center; background:#ddd; } .container { display:inline-block; text-align: center; vertical-align:middle; } .edge { width:0; height:100%; display:inline-block; vertical-align:middle; } .container img{ +display:block;/* for ie */ } .word{ width:500px; display:block; margin:0px auto; text-align:left; background:#eee; } </style> </head> <body> <div class="wrap"> <span class="edge"></span> <span class="container"> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /><span class="word">之前搜集过几个未知大小图片（图文混合）垂直居中的方法，<br />但垂直居中均为近似居中<br /></span> </span> </div> </body> </html>

for opera处两句去掉，对其他浏览器效果并无影响。
for ie处针对ie下图片下面产生的空隙而写。

采用另一种方法来针对opera：

<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap{ height:800px; text-align:center; background:#eee; } .container { border:1px solid #ccc; text-align:left; display:inline-block; vertical-align:middle; } .edge { width:1px; /* for opera */ *width:0; height:100%; display:inline-block; vertical-align:middle; } </style> </head> <body> <div class="wrap"> <span class="edge"></span> <span class="container"> hello boysghgh<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br />hello boys<br /> </span> </div> </body> </html>

因为设置了width:1px;*width:0。导致非ie浏览器下水平居中有误差。

而且，可以想象，这两种方法对FF2无效，如果有人在乎它的话，请拍砖。

—————
有朋友提出，其实对于Opera并不需要那么麻烦，只稍微变下结构就是了：edge层移后。那这样就舒服多了,不用特殊设置了。

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .wrap { width:800px; height:500px; text-align:center; background:#ddd; } .container { display:inline-block; text-align: center; vertical-align:middle; } .edge { height:100%; display:inline-block; vertical-align:middle; } </style> </head> <body> <div class="wrap"> <span class="container" style="overflow:hidden;zoom:1;border:1px solid #aaa"> <div style="float:left;width:100px;height:50px;border:1px solid #ccc;">浮动块</div> <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" /> <b>文字内容文字内容文字内容<br />文字内容文字内容文字内容文字内容文字内容文字内容<br /></b> </span> <i class="edge"></i> </div> </body> </html>

标签： inline-block, vertical-align, 垂直居中, 居中

这篇文章发布于 2008年10月6号，星期一，11:11，归类于 CSS。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

未知高度元素的垂直居中（js实现） | CSSASS 说：

2009年04月28日于12:48

[...] 之前有收集过几个纯CSS的做法：点这里 [...]

浅谈辄止：line-height和vertical-align | CSSASS 说：

2010年01月5日于14:02

[...] 是不是很熟悉啊，我们“未知尺寸元素的垂直居中”的一个方法就是从这里衍生而来的——那是针对block元素的居中：http://www.cssass.com/blog/index.php/2008/36.html 我们的做法是将block元素变成inline-block,或者干脆使用某一inline元素包住block元素（尽管这不符合标准）。转发到新浪微博 [...]

CSSASSCSSASSCSSASS

改变元素display属性的垂直居中方法。作者：ONEBOYS

相关文章:

2 条评论发表在“改变元素display属性的垂直居中方法。”上

留下回复

改变元素display属性的垂直居中方法。 作者：ONEBOYS

相关文章:

2 条评论 发表在“改变元素display属性的垂直居中方法。”上

留下回复

改变元素display属性的垂直居中方法。作者：ONEBOYS

2 条评论发表在“改变元素display属性的垂直居中方法。”上