0元购京东自营斐讯K2路由器返399元活动
置顶

利用CSS的line-height属性让文本垂直居中

作者:     目录: 小代码 & 网页设计     发表: 2010年03月08日

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

实例预览vertical align middle

HTML

<div id="nav">
<p><a href="http://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中的内容垂直居中。

标签: .

发表评论

电子邮件地址不会被公开。 必填项已用*标注