我需要一個解釋，爲什麼我需要垂直對齊兩次，以使我的圖像中心

所以我試圖製作一個固定的高度和寬度的固定器。在這個支架內部，我想放置基於這個支架調整高度和寬度的圖像。這一切都有效，但我很難理解垂直對齊如何工作。 爲什麼我必須給輔助類的div和產品圖像類提供一個對齊方式？我不明白爲什麼我需要使用這個div與助手類來使它工作。我需要一個解釋，爲什麼我需要垂直對齊兩次，以使我的圖像中心

.product-holder { 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 15px 15px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
} 
 

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

 
.product-image { 
 
    max-height: 240px; 
 
    max-width: 240px; 
 
    vertical-align: middle; 
 
}

<div class="product-holder"> 
 
    <div class="helper"> </div> 
 
    <img class="product-image" src="http://cdn3-www.dogtime.com/assets/uploads/2011/01/file_23262_entlebucher-mountain-dog-300x189.jpg"> 
 
</div>

來源

2017-09-13 Jord De Vries

這是當你[應該使用Flexbox的（https://codepen.io/ksiabani/pen/ZXYEwg）。 –

感謝兄弟，非常有幫助 –

當使用text-align水平對齊的元件，left，right和center平均分別與左邊緣，右邊緣和它們的含塊的中心對齊。

垂直對齊是非常不同的。

行內元素與彼此垂直對齊，而不是與它們的包含塊。

幫助器是包含塊的高度，所以它的垂直中間是包含塊的一半。

您的垂直對齊的話說：地方通過助手div的垂直中間，並通過圖像，使得兩條水平線聯合起來做一個橫向的垂直中間一條橫向水平線線。

如果只設置了幫手vertical-align:middle，然後你說：地方通過助手div的垂直中間，並通過圖像的底部一條水平線，使得兩個橫向水平線線條合併成一條水平線。

如果只圖像設置爲vertical-align:middle，然後你說：地方通過助手div的底部，並通過圖像的垂直中間一條水平線，使得兩個橫向水平線線條合併成一條水平線。

如果設置爲既不vertical-align:middle，然後你說：地方通過助手div的底部，並通過圖像，使得兩條水平線聯合起來的底部一條橫向水平線製作一條水平線。

來源

2017-09-13 15:48:13 Alohci

謝謝，非常有幫助的夥計 –

我會建議解決中心按以下步驟進行：DIV和img和top: 50%，left: 50%和transform: translate(-50%, -50%)之間的相對/絕對的關係。不需要額外的元素。與flexbox解決方案相比，具有更好的瀏覽器兼容性。

.product-holder { 
 
    position: relative; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 15px 15px; 
 
    background-color: white; 
 
    border: 1px solid black; 
 
} 
 
.product-image { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    max-height: 240px; 
 
    max-width: 240px; 
 
}

<div class="product-holder"> 
 
    <img class="product-image" src="http://cdn3-www.dogtime.com/assets/uploads/2011/01/file_23262_entlebucher-mountain-dog-300x189.jpg"> 
 
</div>

來源

2017-09-13 17:17:47 Johannes

除非您需要支持古代瀏覽器，否則flexbox具有[非常好的兼容性]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes＃Browser_compatibility） –

那麼，有些人使用古老的瀏覽器，這就是爲什麼我加了這句話...... – Johannes

所以，除非你需要支持很老的瀏覽器，而且由於其他人提供替代你的問題，我張貼太礦的基礎上，Flexbox的：

.product-holder { 
    position: absolute; 
    width: 250px; 
    height: 250px; 
    margin: 15px 15px; 
    background-color: white; 
    border: 1px solid black; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.product-image { 
    max-height: 240px; 
    max-width: 240px; 
}

Codepen demo

More on flexbox

Browser compatibility

來源

2017-09-13 19:41:15

我需要一個解釋，爲什麼我需要垂直對齊兩次，以使我的圖像中心

回答

相關問題