## 一、 vertical-align到底是個(gè)啥?
vertical-align設(shè)置的是元素的垂直對(duì)齊方式,這個(gè)說法看起來很簡(jiǎn)單,但是用起來卻難以捉摸;還有一個(gè)說法是內(nèi)聯(lián)元素的基線相對(duì)于該元素所在行的垂直對(duì)齊方式,那么該元素所在行又是個(gè)啥?總體來說呢都不是特別好理解,那么請(qǐng)看下面一些關(guān)于vertical-align的運(yùn)用,也許你會(huì)理解得更透徹一些。
## 二、 vertical-align對(duì)行內(nèi)塊元素造成哪些影響?
1、如果給子元素的vertical-align設(shè)置為Top
```html
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: top;}
</style>
<body>
<div class="all">
<div class="box1"></div>
</div>
</body>
```
那么子元素的top會(huì)出現(xiàn)在在父元素的top上,也就是子元素會(huì)靠在上面
2、如果給子元素的vertical-align設(shè)置為bottom
```html
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: bottom;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdefg
</div>
</body>
```
子元素的bottom會(huì)出現(xiàn)在父元素的bottom上,這里需要強(qiáng)調(diào)的是父元素的bottom并不是盒子的最下邊,而是父元素里面文本或者inline-block元素的最下面
3、如果給子元素的vertical-align設(shè)置為Middle
```html
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: middle;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdef
</div>
</body>
```
子元素的middle會(huì)在父元素的middle上
4、如果給子元素的vertical-align設(shè)置為Baseline
```html
<style>
.all{
width: 300px;
height: 300px;
background: #0f0;}
.box1{
display: inline-block;
width: 200px;
height: 200px;
background: #ff0;
vertical-align: baseline;}
</style>
<body>
<div class="all">
<div class="box1"></div>abcdef
</div>
</body>
```
子元素的baseline在父元素的baseline上,vertical-align的默認(rèn)值就是baseline
## 三、 基線是個(gè)啥?
為什么說vertical-align會(huì)說到基線呢?那是因?yàn)樵搶傩缘哪J(rèn)值就是baseline,那到底什么是基線,請(qǐng)看圖:

通過這個(gè)圖片我們可以一目了然的發(fā)現(xiàn),其實(shí)基線就是我們英文格子的第三條線。
vertical-align這個(gè)屬性的默認(rèn)值就是baseline,請(qǐng)看如下效果:
```html
<style>
.all{width: 500px;height: 300px;background: #0f0;}
.all div{ display: inline-block;background: #ff0;}
.box1{font-size: 12px;}
.box2{font-size: 18px;}
.box3{font-size: 26px;}
.box4{font-size: 40px;}
</style>
<body>
<div class="all">
<div class="box1">1000phone</div>
<div class="box2">meimei</div>
<div class="box3">dalian</div>
<div class="box4">hahaha</div>
</div>
</body>
```
頁面中我放了四個(gè)行內(nèi)塊元素,里面放了不同字號(hào)的文本內(nèi)容,子盒子也沒有設(shè)置高度,所有的盒子我都沒設(shè)置vertical-align,看看他們會(huì)怎么樣排列:

不錯(cuò),所有元素都按照基線的位置對(duì)齊了,就是因?yàn)樗麄兊哪J(rèn)垂直對(duì)齊方式的取值正是baseline的原因。
## 四、 行高控制的到底是哪里垂直居中?
做為一個(gè)資深的前端開發(fā),大家都清楚的知道:行高等于容器高可以設(shè)置單行文本的垂直居中,那么萬一容器里面裝的是圖片呢?裝的是盒子呢?
如果盒子里面裝的是行內(nèi)塊元素,不管是圖片還是其他元素,它身上的vertical-align就會(huì)在行高范圍內(nèi)進(jìn)行運(yùn)動(dòng)。
```html
<style>
.all{width: 500px;height: 500px;background: #0f0;line-height: 400px;}
.all img{vertical-align:bottom;width: 100px;}
</style>
<body>
<div class="all">
<img src="1.jpg" alt="">
</div>
</body>
```




分別調(diào)整了圖片的vertial-align的取值,你會(huì)發(fā)現(xiàn)他其實(shí)就是在行高范圍內(nèi)進(jìn)行移動(dòng)的,所以圖片的垂直居中通常也會(huì)選擇取值為middle的做法。
## 五、 關(guān)于圖片默認(rèn)間隙的問題?
通過上面幾種情況的比較,相信大家也能知道這圖片間隙是什么原因?qū)е碌牧?,不錯(cuò),就是因?yàn)関ertical-align默認(rèn)值是baseline
```html
<style>
.all{width: 500px;background: #0f0;}
</style>
<body>
<div class="all">
<img src="1.jpg" alt="">
</div>
</body>
```
我的父盒子設(shè)置了背景顏色,但是我沒有設(shè)置高度

這個(gè)間隙正是因?yàn)閳D片的最下邊源被認(rèn)為是基線所在的位置,所以這個(gè)縫隙就是英文格子第三條和第四條之間的距離

加了幾個(gè)字母,可以清楚的看到這個(gè)距離的原因所在了。
那么原因知道了,解決方案也得有啊:
1、將圖片的元素類型進(jìn)行轉(zhuǎn)換,轉(zhuǎn)為塊元素就不會(huì)存在這個(gè)問題了,因?yàn)橹挥行袃?nèi)塊元素才會(huì)受vertical-align的影響
```html
<style>
img{display:block}
</style>
```
2、改變圖片vertical-align的取值,只要不是默認(rèn)的baseline就好啦(三選一即可)
```html
<style>
img{vertical-align:top;}
img{vertical-align:middle;}
img{vertical-align:bottom;}
</style>
```
3、給圖片的父元素設(shè)置字號(hào)為0,沒有文本在圖片旁邊作祟了,也就沒有間隙了
```html
<style>
.all{font-size:0;}
</style>
```
```更多關(guān)于“web前端培訓(xùn)”的問題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。