Question

我为此尝试了很多方法，但我无法得到它。经过3年的前端工作后相当尴尬 - 但我不能再浪费时间了。

我有一个WordPress图片库，我需要将图像垂直居中。我试过设置高度，线高和垂直对齐：中间 - 但没有快乐。

图像是由用户添加的 - 因此尺寸和总数不是静态的 - 所以特别针对单个元素高度的解决方案是不合适的。

网址： http://www.europa-international.net/

<dl class="gallery-item ">
<dt class="gallery-icon">
    <a href="http://www.europa-international.net/our-videos/snapshot-1-02-01-2014-15-33/" title="Snapshot 1 (02-01-2014 15-33)"><img width="125" height="70" src="http://www.europa-international.net/wp-content/uploads/2013/07/Snapshot-1-02-01-2014-15-33.png" class="attachment-homepage-gallery" alt="Latest Promo Videos"></a>
</dt>
<dd class="wp-caption-text gallery-caption">Latest Promo Videos</dd>

#gallery-1 .gallery-icon {
    height: 104px;
    line-height: 104px;
}
#gallery-1 .gallery-icon a {
    vertical-align: middle;
}

和本网站讨论的许多变化（给出锚高度/线高：104px，display：block，vertical-align：middle）。

编辑：在此处发布小提琴：http://jsfiddle.net/DE4ph/2/

同样 - 重复的答案解决方案不合适，因为我无法（轻松）将标记更改为WordPress生成的标记。

Answer 1

您需要做的就是为父容器提供一个与容器本身具有相同值的行高（即200px），然后在图像中设置vertical-align：middle。

.gallery-icon { 
    height: 200px; 
    line-height: 200px; 
}
.gallery-icon img { 
    vertical-align:middle; 
}

请参阅：http://jsfiddle.net/B78nD/

Answer 2

其中一个选项是将容器 div 设置为position：relative，然后将以下样式添加到 anchor ： / p>

位置：绝对; display：inline-block; 左：50％; 上：50px; margin-left：-62.5px; margin-top：-35px;

另一种选择是使用vertical-align：

#gallery-1 .gallery-icon {
    height: 104px;
}
#gallery-1 .gallery-icon a {
     line-height: 104px;
}

#gallery-1 .gallery-icon a img {
     vertical-align: middle;
}

顺便说一句如果它自己的图像位于锚内部的div内 - 据我所知，它不推荐使用HTML。您可以改为将图像的显示更改为阻止或内联阻止。

将div与div内的图像垂直对齐

2 个答案: