- 设置父div标签的inline-height属性
将inline-height属性的值设置成和div的高度一下就可以简单的实现div中p标签内的文字垂直居中
示例如下:
html代码
<footer>
<div id="footer">
<p id="endp">都行</p>
</div>
</footer>
css代码
footer{
padding: 0px;
margin: 0px;
width: 100%;
height: 70px;
/*border-top: solid;*/
text-align: center;
/*设置inline-height属性可以让div里面的文字垂直居中*/
/*line-height: 70px;*/
background-color: #3bf57f;
}
效果如图:
但是这种方法虽然表面上看确实居中了,人家也确实居中了,但是在选中这段剧中的文字的时候就能看出来端倪
- 设置p标签为absolute布局,再根据父元素的位置一直调整至适合的位置即可
不用多说,这种方法相当简单粗暴,直接上代码
<div id="topLeft">
<p id="titlep">个人信息注册</p>
</div>
p#titlep{
/*margin: 0 auto;*/
/*line-height: 20px;*/
/*display: block;*/
/*vertical-align: middle;*/
position: absolute;
top:10px;
left: 300px;
font-size: larger;
font-family: 微软雅黑;
}
让我们看看效果
而且选中文字的时候并不会像inline-height属性那样尴尬