任鸟飞网站设计博客

在编写菜单、导航条等CSS代码时，经常需要让里面的内容垂直方向居中排列。
这里利用line-height属性及height属性让元素垂直居中。

实例预览：vertical align middle

HTML

<div id="nav">
<p><a href="http://www.renniaofei.com">Home</a>
<a href="">About</a>
<a href="">Contact</a></p>
</div>

CSS

#nav {
	background-color: #FFFFCC;
	height: 30px;
	border: 1px solid #FF6600;
}
#nav p {
	line-height: 30px;
	height: 30px;
	display: block;
	margin: 0px;
	padding: 0px;
}

代码说明：

将#nav p 中的line-height和height设置成同一值，即可保证#nav p中的内容垂直居中。