让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属性那样尴尬

让div中的p标签文字垂直居中的方法相关推荐

[css] 怎么让div中的图片和文字同时上下居中？
[css] 怎么让div中的图片和文字同时上下居中? <div><img src="./"/><label>文字内容</label> ...
在div中使用css让文字底部对齐的方法
2019独角兽企业重金招聘Python工程师标准>>> css对文字的布局上没有靠容器底部对齐的参数,不过我们可以使用position的相对和绝对定位功能轻松实现文字靠近div底部对 ...
div中的img标签多余空白bug解决方案
上传图片之前: 上图之前之后: 原图是这样的: 发现区别了吧,这里用到了css3的object-fit属性为cover(保持原有尺寸比例.保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一 ...
css如何实现让div中的多行文字居中显示
标题css如何实现让div中的多行文字居中显示最近在做项目的时候遇到一个div中有多行文字(可能一行也可能多行)需要实现居中显示,试了好多方法都不行,显然不能使用padding来居中,因为文字有多少 ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
【HTML】处理＜br＞换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法，字符串中包含HTML标签被转义的问题解决
[HTML]处理换行符追加到前端换行无效的问题 --- html中渲染的字符串中包含HTML标签无效的处理方法,字符串中包含HTML标签被转义的问题解决参考文章: (1)[HTML]处理换行符 ...
Query实现将div中滚动条滚动到指定位置的方法，html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法在曾经的"淘宝UED招聘"中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.&quo ...

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

让div中的p标签文字垂直居中的方法相关推荐

最新文章

热门文章