原理比較簡單就不上圖片了 你也許聽說過在行元素中使用vertical-align: middle; 可以實現居中對其，但實際使用上，常常沒有作用。 其實行元素有四條線分別是： 頂線 中線 基線 底線 預設行元素是基線對齊的（兩個元素的基線在同一高度） 下麵代碼相當於圖片的基線和文字的中線對齊（圖片的 ...
原理比較簡單就不上圖片了
你也許聽說過在行元素中使用vertical-align: middle; 可以實現居中對其，但實際使用上，常常沒有作用。
其實行元素有四條線分別是：
- 頂線
- 中線
- 基線
- 底線
預設行元素是基線對齊的（兩個元素的基線在同一高度）
下麵代碼相當於圖片的基線和文字的中線對齊（圖片的基線就是中線）
<img src="xxx">
<span style=" vertical-align: middle;">文字</span>
但是兩個元素都是文字的話，兩個元素都要加上 vertical-align: middle;才可以生效上下居中對齊的效果
<span style=" vertical-align: middle; font-size: 30px;">ABC</span>
<span style=" vertical-align: middle; font-size: 20px;">ABC</span>
這樣佈局很亂，有多個元素的情況下要不停地vertical-align: middle;不是很好用
推薦使用flex display: flex;align-items: center;
<div style="display: flex;align-items: center;">
<span style=" font-size: 30px;">文字</span>
<span style="font-size: 20px;">文字</span>
<span style="font-size: 10px;">文字</span>
</div>
