再谈垂直居中

问题描述

• 一段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

这篇只是谈如何解决我手头的垂直居中问题，再遇到垂直居中的难题，一定还会再好好研究