本篇文章主要给大家介绍实现p垂直方向居中的方法。
网页设计中p各种居中布局，是html/css初学者们最为基础且需要掌握的知识技能。p水平居中效果我们在之前的文章中有为大家介绍过，想必新手朋友们也都已经掌握了解了。
下面我们就继续结合简单的示例给大家介绍p内容垂直居中的实现方法。
推荐参考学习：《html教程》
p垂直居中代码示例如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Div垂直居中</title></head><body><p style="line-height: 500px;height: 500px;width: 500px; background: red;"> php中文网</p></body></html>
前台效果如下图所示：
如图所示，p中的文字垂直居中。其中主要的属性就是line-height。
line-height 属性设置行间的距离（行高即垂直方向）。
line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
如果我们这里将设置的高度height:500px，改为200px，那么呈现效果如下：
如果我们这里不设置高度height但是设置line-height: 200px;，效果就如下所示：
此时我们可以测量发现红色背景的p的高度为400px。
line-height和height区别：
简单得说，line-height是行高的意思，height则是定义元素自身的高度。
综上所述，当我们想要实现p内容垂直居中效果，需要使line-height和height值保持一致。
本篇文章就是关于p垂直居中的实现方法介绍，也是非常简单易懂的，希望对需要的朋友有所帮助！
标签： div垂直居中
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）