我需要一个解释，为什么我需要垂直对齐两次，以使我的图像中心

所以我试图制作一个固定的高度和宽度的固定器。在这个支架内部，我想放置基于这个支架调整高度和宽度的图像。这一切都有效，但我很难理解垂直对齐如何工作。 为什么我必须给辅助类的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

我需要一个解释，为什么我需要垂直对齐两次，以使我的图像中心

回答

相关问题