块级元素的垂直居中

最新推荐文章于 2022-02-11 13:54:25 发布

原创最新推荐文章于 2022-02-11 13:54:25 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #border #class #ie #safari #扩展

Web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS实现块级元素的垂直居中、水平居中的翻页元素、菜单的水平居中以及图片的垂直居中。提供了具体的代码示例，并探讨了不同浏览器间的兼容性问题。

块级元素的垂直居中

BTN

#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;
}