vertical-align對齊規則
起作用的前提條件
- 只能應用於內聯元素以及 display 值為 table-cell 的元素。
- vertical-align 屬性只能作用在 display 計算值為 inline、inline- block，inline-table 或 table-cell 的元素上。因此，預設情況下，span、strong、 em等內聯元素，img、button、input等替換元素，非 HTML 規範的自定義標籤 元素，以及<td>單元格，都是支援 vertical-align 屬性的，其他塊級元素則不支援。
- 浮動和絕對定位會讓元素塊狀化，從而讓內聯元素的vertical-align不生效
百分比
- vertical-align 的百分比值是相對於 line-height 計算的
- 且是以line-height的基線為基礎，vertical-align:0%和vertical-align：baseline效果一樣
vertical-align：inline-block和baseline
- vertical-align 屬性的預設值 baseline 在文字之類的內聯元素那裡就是字元 x 的下 邊緣，對於替換元素則是替換元素的下邊緣。但是，如果是 inline-block 元素則規則要 複雜了：一個 inline-block 元素，如果裡面就是沒有圖文內容，或者 overflow 不是 visible， 則該元素的基線就是其 margin 底邊緣；否則其基線就是元素裡面最後一行內的圖文的基線。 見demo ：inline-block元素的vertical-align.html
vertical-align:middle實現垂直居中
-
內聯元素：元素的垂直中心點和行框盒子基線往上 1/2 x-height 處對齊。vertical-align:middle 定義是元素的中線和字元 x 中心點對齊
-
table-cell 元素：單元格填充盒子相對於外面的表格行居中對齊。table-cell 元素設定 vertical-align 垂 直對齊的是子元素，但是其作用的並不是子元素，而是 table-cell 元素自身。就算 table-cell 元素的子元素是一個塊級元素，也一樣可以讓其有各 種垂直對齊表現。
-
middle 將元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊 這裡元素盒子的垂直中點容易確定，父盒子的baseline也好確定，但是x-height要進行計算得到，這個x-height就是字母x的高度。
-
baseline確定的規則 1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素【line box】的baseline是最後一個inline box 的baseline。
3、inline-block元素的baseline確定規則
規則1：inline-block元素，如果內部有line box，則inline-block元素的baseline就是最後一個作為內容存在的元素[inline box]的baseline，而這個元素的baseline的確定就要根據它自身來定了。 規則2：inline-block元素，如果其內部沒有line box或它的overflow屬性不是visible，那麼baseline將是這個inline-block元素的底margin邊界。 實際例子見：對齊規則1.html 詳情見部落格：https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ctn-block{
display: block;
background-color: #bbb;
line-height: 200px;
font-size: 50px;
}
.ctn-block .child1{
display: inline-block;
width: 100px;
height: 100px;
margin:10px 0;
vertical-align: baseline; /*將子元素盒子的baseline與父盒子的baseline對齊
vertical-align: middle;/*將子元素盒子的垂直中點與父盒子的baseline加上父盒子的x-height的一半位置對齊*/
/***注意：當vertical-align設定為top和bottom時，其就不是按照baseline進行定位了，而是根據line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。**/
/*vertical-align: top;/*將子元素盒子的頂部和其所在的line box頂部對齊*/
/*vertical-align: bottom;/*將子元素盒子的底部和其所在的line box底部對齊*/
background-color: aliceblue;
}
/*
父元素.ctn-block的base-line是Gg的baseline，
inline-block元素因為沒有內部line box，也沒有設定overflow:visible，所以其baseline是底margin邊界。
*/
.wrapper{
width: 200px;
height: 200px;
border: 1px solid red;
line-height: 150px; /*line box就是行高所形成的那個高度*/
}
.son{
/***注意：當vertical-align設定為top和bottom時，其就不是按照baseline進行定位了，而是根據line box進行定位。子元素盒子的頂部和底部也就是其上下margin外邊界。**/
/*vertical-align: top;/*將子元素盒子的頂部和其所在的line box頂部對齊*/
/*vertical-align: bottom;/*將子元素盒子的底部和其所在的line box底部對齊*/
vertical-align: bottom;
display: inline-block;
width: 50px;
height: 50px;
background: black;
}
</style>
</head>
<body>
<div class="ctn-block">
<div class="child1"></div>
<span>Gg</span>
</div>
<div class="wrapper">
<span class="son"></span>
</div>
</body>
&l