Html 固定容器中的垂直居中图像

我正在使用wordpress动态显示图像。每个图像的固定宽度为186像素，高度可变，具体取决于图像的比例。每个图像位于一个方形框中，填充15px。默认情况下，图像显示在框的顶部。我正在寻找一种方法来垂直居中的形象，鉴于其固定的宽度，但可变的高度。这是我的密码：

HTML:

---

我可以使用绝对定位，但如果不知道图像的确切高度，就很难完全居中。但是，我们知道集装箱箱的确切尺寸。想法？

使用此实现垂直对齐的技术将允许您拥有动态高度容器：

<div class="logoContainer">
    <span></span><img src="/path/to/image.jpg" />
</div>

试试这个-

---

最大可能的图像高度是156px吗？这就是你的CSS所暗示的，或者你想解释任何可能的高度吗？这个问题与CSS的jQuery替代品更相关

.logoContainer {
    padding: 15px;
    background: #dddddc;
    margin-bottom: 10px;
    width: 186px;
    height: 186px;
}
.logoContainer img {
    max-width: 100%;
    height: auto;
}

<div class="logoContainer">
    <span></span><img src="/path/to/image.jpg" />
</div>

.logoContainer {
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; }
span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
.logoContainer img { 
    vertical-align: middle;
    display: inline-block; }

.logoContainer {
    padding:15px;
    background:#dddddc;
    margin-bottom: 10px;
    width:186px;
    height:186px;
    line-height: 186px;
}

.logoContainer img {
    max-width: 100%;
    vertical-align: middle;
}