div中让文字垂直居中

问题引入

在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的 heightline-height 两个属性的值相等。

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

添加代码,修改后的效果如下图所示:

这里写图片描述

图2.修改后效果图

相关文章

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


作者:戴翔
电子邮箱:daixiangcn@outlook.com


daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页