使用line-height来现文本的垂直居中
实例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
border:3px solid green;
line-height:100px;
width:400px;
text-align:center;
}
p{
display:inline-block;
line-height:20px;
vertical-align:middle;
}
</style>
</head>
<body>
<h1>居中</h1>
<div>
<p>我是水平和垂直居中的。</p>
</div>
<p>这个实例是用line-height来现文本的垂直居中</p>
</body>
</html>
运行效果:
评论