利用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中的内容垂直居中。

标签:

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

发表评论

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.