Inline-block | CSSASS

文章关键字 ‘inline-block’

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

2008年10月6号，星期一

之前也有搜集过纯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, 垂直居中, 居中
发布在 CSS | 2 条评论 »