div中让文字垂直居中

版权声明：本文为博主原创文章，未经博主允许不得转载。本文永久链接： https://blog.csdn.net/yuanxiang01/article/details/81609808

问题引入

在div中如何让文字垂直居中？

作者在刚接触web前端开发时就遇到了这个问题，一直没有记录下来，今天正好有空，便记录下来。

情景再现

为了方便展示，我把style先直接写在了div里。

<div style="width: 1200px;height: 60px;background-color: #952328;margin-bottom: 20px;border-radius: 20px;font-size: 25px;color: #cb9a34;text-align: center;/* line-height: 60px; */">
    <p>寺院巡礼</p>
  </div>

效果如下图所示：

图1.修改前效果图

可以看到，“寺院巡礼”的标题并没有达到垂直居中的效果。

解决方法

简单的解决方法就是让div的 height 和 line-height 两个属性的值相等。

由之前的代码可知此div的高为60px，因此，在原style中添加 line-height: 60px; 样式，即可。

添加代码，修改后的效果如下图所示：

图2.修改后效果图

相关文章

《在Bootstrap4中使用垂直居中》>>点击阅读

---

作者：戴翔
电子邮箱：[email protected]

---