问题描述
- 一段html代码是这样
<main className="main">
<h3 className="head">垂直居中</h3>
<p className="p"><span>如何做到当然是非常难的</span></p>
<div className="div">xxxxxxxx</div>
</main>
.main{
margin: 0;
line-height: 1;
font-size: 16px;
background-color: antiquewhite;
}
.head{
vertical-align: middle;
margin: 0;
font-size: 30px;
display: inline-block;
}
.p{
height: 22px;
vertical-align: middle;
margin: 0;
background-color:red;
display: inline-block;
}
.div{
vertical-align: middle;
margin: 0;
font-size:15px;
display: inline-block;
}
image.png
- 接着我希望他们都能是垂直居中的
- 根据刚刚了解vertical-align想要让一个块元素中的所有inline-block，垂直居中，只要给块元素设置一个行高，借助vertical-align对inline-block有效的特点，直接给每个子元素设置vertical-align：middle
-
但是却是这个样子的
image.png
- 为什么呢？
问题解答
- Q1:为什么会出现如图效果？
- A1:首先设置了父元素的line-height:2,并将所有的inline-block子元素都设置了vertical-align：middle。
-
vertical-align：middle：让元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。很抽象，但是看起来所有的（inline-block）子元素的中垂点好像是在父元素的中线上
-
- Q2:那么为什么红色背景的子元素会出现这种效果呢？
- A2:因为vertical-align只对作用的inline或者inline-block元素有效，因此对其子元素span没有任何作用，其子元素span的vertical-align仍然是baseline
- Q3:那么如何处理红色背景子元素中的字呢？
- A3:首先先确定红色框中的子元素是span是一个inline元素，让这个inline元素垂直居中即可,因此首先需要给红框设置行高，
- 如果想要红框中的字垂直居中，那么需要给红框设置行高，可以给红框设置行高和本身div高度一致，这样中线就大概在div中央了
- 然后设置span vertical-align：middle
