200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 让div中的p标签文字垂直居中的方法

让div中的p标签文字垂直居中的方法

时间:2022-02-06 13:51:17

相关推荐

让div中的p标签文字垂直居中的方法

设置父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属性那样尴尬

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。