垂直全高柱

Question

鑑於以下佈局對齊圖片：

.half-side { 
    width: 50%; 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
} 

.leftbox { 
    margin: 0px auto; 
} 

.rightbox { 
    margin: 0px auto; 
} 

<div class="half-side"> 
    <div class="leftbox"> 
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" /> 
    </div> 
</div><!-- 
--><div class="half-side"> 
    <div class="rightbox"> 
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" /> 
    </div> 
</div> 

Here's a Fiddle。

如何垂直居中放置圖像？

正如你所看到的，我試過vertical-align: middle無濟於事。坦率地說，我不明白爲什麼這不起作用。

我一直看到這個「絕招」 - 和類似的方法使用負轉變 - 無處不在：

.element { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

這會導致圖像中途關閉頁面頂部推。

如何垂直對齊我的兩列中的內容？

Answer 1

在您的代碼中，您的div沒有高度，因此它永遠不會知道垂直中心的位置。最簡單的方法是在兩個元素上使用inline-block幫手height: 100%和vertical-align: middle。

下面是完整的代碼如下：

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
.half-side { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.helper { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
img { 
 
    vertical-align: middle; 
 
} 
 

 
.leftbox { 
 
    margin: 0px auto; 
 
    height: 100%; 
 
} 
 

 
.rightbox { 
 
    margin: 0px auto; 
 
    height: 100%; 
 
}

<div class="half-side"> 
 
    <div class="leftbox"> 
 
    <span class="helper"></span> 
 
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" /> 
 
    </div> 
 
</div><!-- 
 
--><div class="half-side"> 
 
    <div class="rightbox"> 
 
    <span class="helper"></span> 
 
    <img src="https://68.media.tumblr.com/avatar_65ce634bba10_128.png" /> 
 
    </div> 
 
</div>

Answer 2

垂直居中問題通常最好用display: flex解決。請參閱https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/