CSS垂直对齐另一个div内的图像（Divi wordpress主题）答案

【问题标题】：CSS vertical align image inside another div (Divi wordpress theme)CSS垂直对齐另一个div内的图像（Divi wordpress主题）
【发布时间】：2016-05-24 08:51:11
【问题描述】：

我试图在 div 中垂直居中我的图像。我有一组不同高度和宽度的图像。我制作了一个 320x230 的盒子，在里面显示图像。较大的图像溢出：隐藏。但是一些较小的图像有差距，所以我想把它们放在这个网站上---> Here

我将这个 CSS 用于包含图像的 DIV

.transformations {

max-width:320px;
max-height: 230px;
min-width:320px;
min-height: 230px;
box-shadow: 0 0 50px #0052af;
overflow: hidden;
border: 4px solid #0052af;
}

【问题讨论】：

您如何将您的网站托管为 O.o!
这只是一个用于开发网站的临时链接。我还没有将它连接到一个实时域，所以我使用这个链接。我认为每个主机都有这个选项。我用ecowebhosting.co.uk

标签： html css wordpress alignment vertical-alignment

【解决方案1】：

我刚刚做了一些自定义，它可以工作：

<div class="img-wrapper">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

还有css：

.img-wrapper{
  position: relative;
  overflow:hidden;
  height:425px;
}

.img-wrapper img{
   position: absolute;
   top:-100%; left:0; right: 0; bottom:-100%;
   margin: auto;
}

这在 Divi wordpress 主题上对我有用。

【讨论】：