在使用vertical-align:middle;的時(shí)候經(jīng)常會(huì)出現(xiàn)不起作用的情況。今天來(lái)梳理一下vertical-align:middle;用法。在看文章之前你可以去看下張大神的關(guān)于line-height和vertical-align的文章CSS深入理解vertical-align和line-height的基友關(guān)系。
首先要注意的是只有行內(nèi)元素和行內(nèi)塊級(jí)元素屬性才能生效。
做一下測(cè)試。

.wrap{
    width: 500px;
    height: 100px;
    background: #201C29;
    margin: 0 auto;
    margin-bottom: 20px;
    box-shadow: 0 0 5rem #100e17;
}
.box1{
        background: #FF3D57;
    display: block;
    vertical-align: middle;
}
.box1a{
    width: 100px;
    height: 50px;
}
.box1b{
        width: 80px;
    height: 50px;
}
.box2{
    background: #FFCB00;
    display: inline;
    vertical-align: middle;
}
.box2a{
    font-size: 50px;
}
.box3{
    background: #00D546;
    display: inline-block;
    vertical-align: middle;
}
.box3a{
        width: 100px;
    height: 80px;
}
.box3b{
    width: 100px;
    height: 40px;
}

<div class="wrap">
    <div class="box1 box1a">塊級(jí)元素</div>
    <div class="box1 box1b">塊級(jí)元素</div>
</div>
<div class="wrap">
    <div class="box2 box2a">行內(nèi)元素</div>
    <div class="box2 box2b">行內(nèi)元素</div>
</div>
<div class="wrap">
    <div class="box3 box3a">行內(nèi)塊級(jí)元素</div>
    <div class="box3 box3b">行內(nèi)塊級(jí)元素</div>
</div>

復(fù)制代碼到瀏覽器中可以看到如下的結(jié)果。

img.png

img2.png

img3.png

1. 如果父級(jí)的高度是不固定的，那我們是不需要設(shè)置父級(jí)line-height屬性的，因?yàn)樽蛹?jí)之間會(huì)垂直居中對(duì)齊，父級(jí)的高度會(huì)被撐開(kāi)，由高度最大的自己決定。
2. 如果父級(jí)的高度是固定的，那么可以設(shè)置父級(jí)的line-height等于它的高度。還有一種方法就是讓其中一個(gè)子級(jí)的高度正好等于父級(jí)的高度。那這樣豈不是還要寫(xiě)一個(gè)多余的元素，我們可以用偽類來(lái)處理。

.wrap::before{
  content: '',
  display: inline-block;
  height: 100%;
  width: 1px;
  vertical-align: middle;
}

這樣這個(gè)多余的元素就不會(huì)影響你的布局了。

3. 如果父級(jí)室友固定高度的，那子級(jí)的高度千萬(wàn)不能超過(guò)父級(jí)的高度，如果大于的話，那子級(jí)元素就不會(huì)以父級(jí)垂直中心線對(duì)齊了，而是會(huì)以超過(guò)父級(jí)高度的那個(gè)子級(jí)垂直中心線。
   我們用一張圖片來(lái)演示一下吧。
   
   img4.png
   
   這里圖片要設(shè)置vertical-align: middle;，圖片的高度此時(shí)是大于父級(jí)高度的，所有的子級(jí)現(xiàn)在都是和圖片垂直對(duì)齊的，不再是和父級(jí)垂直對(duì)齊。

補(bǔ)充一點(diǎn)東西：當(dāng)我們?cè)谝粋€(gè)標(biāo)簽中放置一張圖片時(shí)，父級(jí)高度會(huì)被撐出來(lái)一部分

img5.png