垂直居中對齊浮動內容

Question

我下面這個SO Answer垂直對齊一個div的內容有float: left造型：

.main { 
 
    height: 85px; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
    width: 8rem; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>

但是，它不垂直對齊按高度的包裝div 主。代碼中有什麼錯誤？

Answer 1

如果添加

display: flex; 
align-items: center; 

到.main類，它應該工作。

.main { 
 
    height: 85px; 
 
    background-color: #f00; 
 
    /*position: absolute;*/ 
 
    /*top: 2rem;*/ 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
    width: 8rem; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

在鏈接的問題，你可以看到線箱贊同，但不準確與的main - 嘗試設置height爲main，你會看到。

您已爲height設置爲main這裏，這一切都有所不同。爲此，您可以使用僞元素中心：

.main:after{ 
    display: inline-block; 
    vertical-align: middle; 
    height: 100%; 
    content: ''; 
} 

請參見下面的演示：

.main { 
 
    height: 85px; 
 
    border: 1px solid; 
 
} 
 

 
.child_1, 
 
.child_2 { 
 
    float: left; 
 
} 
 

 
.main:after{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    height: 100%; 
 
    content: ''; 
 
}

<div class="main"> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_1"> 
 
     Some long text is put here 
 
    </div> 
 
    </div> 
 
    <div style="display: inline-block;vertical-align: middle;"> 
 
    <div class="child_2"> 
 
     22 
 
    </div> 
 
    </div> 
 
</div>