问题引入

在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中使用垂直居中》>>点击阅读

作者：戴翔

电子邮箱：daixiangcn@