問題描述
- 一段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
- 接著我希望他們都能是垂直居中的
- 根據(jù)剛剛了解vertical-align想要讓一個塊元素中的所有inline-block悴了，垂直居中，只要給塊元素設(shè)置一個行高攘烛，借助vertical-align對inline-block有效的特點，直接給每個子元素設(shè)置vertical-align：middle
-
但是卻是這個樣子的
image.png
- 為什么呢镀首？
問題解答
- Q1:為什么會出現(xiàn)如圖效果坟漱？
- A1:首先設(shè)置了父元素的line-height:2,并將所有的inline-block子元素都設(shè)置了vertical-align：middle。
-
vertical-align：middle：讓元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊更哄。很抽象靖秩，但是看起來所有的（inline-block）子元素的中垂點好像是在父元素的中線上
-
- Q2:那么為什么紅色背景的子元素會出現(xiàn)這種效果呢？
- A2:因為vertical-align只對作用的inline或者inline-block元素有效竖瘾，因此對其子元素span沒有任何作用沟突，其子元素span的vertical-align仍然是baseline
- Q3:那么如何處理紅色背景子元素中的字呢？
- A3:首先先確定紅色框中的子元素是span是一個inline元素捕传，讓這個inline元素垂直居中即可,因此首先需要給紅框設(shè)置行高惠拭，
- 如果想要紅框中的字垂直居中，那么需要給紅框設(shè)置行高庸论，可以給紅框設(shè)置行高和本身div高度一致职辅，這樣中線就大概在div中央了
- 然后設(shè)置span vertical-align：middle
