使用line-height+inline-block做多行文字的垂直居中
发布时间
阅读量：
阅读量
上图这段文字上下左右都是居中的。
常见的做法通常是将元素设置为水平和垂直居中。使用 left: 50%; top: 50%; 的样式来实现水平和垂直居中。然后可以通过 margin-left 和 margin-top 调整微调
效果的确也能实现。现在这里我们换个
腾讯作为公司历史上第三次组织架构调整的一部分，在2018年12月内部员工大会上对一批部分中层干部（以下简称为‘中干’）进行了人员轮岗安排。
.box {
width: 700px;
border: 1px solid #f00;
margin: auto;
line-height: 200px;
text-align: center;
}.box .content {
display: inline-block; //把块状元素转为行内元素
height: auto;
line-height: 26px;
width: 400px;
background: #ccc;
vertical-align: middle;
text-align: left;
}
添加样式后box的高度达到了200px，并从而导致其呈现异常高的状态的同时在视觉上带来了明显的干扰
全部评论 (0)
还没有任何评论哟~