#wrapper { border:1px solid #ccc; width:400px; height:200px; text-align:center; line-height:200px; // Vertical Align For IE7 & Firefox _font-size:120px; // Vertical Align For IE6 } #wrapper a { display:-moz-inline-block; // For Firefox 2(-) display:inline-block; // For Firefox 3 & IE6, 对于IE6来说其实相当于zoom:1, 仅仅是给elem一个layout。 // 注意:支持display:inline-block的浏览器有:Firefox3,Safari,Opera margin:0 auto; // For Firefox 2(-) width:80px; height:20px; font:11px/20px arial; background:red; }
扩展(一):水平居中的翻页元素
<div class="pager"> <a href="" class="first">first</a> <a href="" class="prev">prev</a> <a href="">1</a> <strong>2</strong> <a href="">3</a> <span>...</span> <a href="">8</a> <a href="" class="next">next</a> <a href="" class="last">last</a> </div>
.pager { width:800px; border:1px dotted #ccc; text-align:center; } .pager * { display:-moz-inline-box; // 此属性会造成text-align、text-indent等无效的问题,不建议使用。 -moz-box-align:center; // 解决上个属性造成的text不能垂直居中的问题 display:inline-block; padding:0 12px; height:28px; line-height:28px; border:1px solid #ccc; } .pager span { border-color:white; padding:0 3px; } .pager strong { border-color:red; } .pager .last { background:red; }
这种方法有个局限:因为使用了-moz-inline-box属性,所以不能设置text-align,text-indent。因此不能用background进行图片替换。
扩展(二):菜单的水平居中
<div id="menu"> <del> // 非del莫属?! <ul> <li><a href="">Tab One</a></li> <li><a href="">Tab Two: Longer</a></li> <li><a href="">Tab Three: Longest</a></li> <li><a href="">Tab Four</a></li> </ul> </del> </div>
#menu { border:1px dotted #ccc; text-align:center; } #menu del { display:inline-block; text-decoration:none; } #menu ul { display:table; margin:0 auto; } #menu li { display:table-cell; *float:left; } #menu li a { display:block; width:160px; background:gray; margin:0 3px; }
此方法来源:http://www.cssplay.co.uk/menus/centered.html
扩展(三):图片的垂直居中。(内联元素的垂直居中)
#wrapper_2 { border:1px solid #ccc; width:400px; height:200px; text-align:center; display:table-cell; // For Firefox vertical-align:middle; // For Firefox *line-height:200px; // Vertical Align For IE7 _font-size:175px; // Vertical Align For IE6, FontSize 大法 } #wrapper_2 img { *vertical-align:middle; // For IE, 不设的话图片下面有个小空位 border:1px solid #ccc; }