Div中图片的垂直对齐

Question

std::is_fundamental

从上图中可以看出，如何将它们垂直对齐到灰色框的中间，它们的顶部和底部高度相等。

代码：

<div style="height: 290px; width: 210px; background-color: grey;">
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>

我试过上面的风格，但似乎只调整了图片的顶部。我不能让它与中间对齐。任何帮助将非常感激。感谢

Answer 1

由于默认情况下图像是内联元素，因此使用适用于CSS的垂直居中文本的方法适用于此情况。

例如，使用line-height将如下工作：

<div style="height: 290px; width: 210px; background-color: grey; line-height:250px;">
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="padding: 20px 0;"/>
</div>

使用弹性框也可以正常工作。如果您愿意将img设置为块元素，那么您可以使用其他一些技巧，例如transform或否定margin。

例如：

<div style="height: 290px; width: 210px; background-color: grey; position: relative;">
    <img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height: 100%; padding: 20px 0;"/>
    <img src="${ImagePopulator}${MainProductImage}"style="display: block; margin-top:-145px;top 50%; position:relative; height:100%; padding: 20px 0;"/>
</div>

Answer 2

将这些css添加到要在中心对齐的元素。

position: relative;
top: 50%;
transform: translateY(-50%);

Look at this fiddle

Answer 3

你可以尝试这个css -

display: flex; or, -webkit-flex
justify-content: center;
align-items: center;
flex-direction: column; or, row

Answer 4

使用以下样式添加到您的代码中：

<div style="height: 290px; width: 210px; background-color: grey; display:table-cell; vertical-align:middle; text-align:center">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTKfww8iUXidrKRO9vnHq3rWTJdcXK8YCIhSPTMxrQ9yD1EdlnX" style="padding: 20px 0;"/>
</div>

Here is a working example with the above code

产生以下内容：

Answer 5

您可以尝试这样

＆＃13;

＆＃13;

.block{
  display: table-cell;
  vertical-align: middle;
  height: 120px;
  background: rgba(0,0,0,.3);
}
img{
  height: 30px;
}

＆＃13;

 <div class="block">
  <img src="https://raw.githubusercontent.com/ModernPGP/icons/master/keys/icon-fingerprint.png">
 </div>

＆＃13;

＆＃13;

＆＃13;

  

当您使用display: table-cell时，您可以使用vertical-align CSS属性