将锚点与 div 内的图像垂直对齐 [重复]

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、显示：块、垂直对齐：中间）。

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

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

Answer 1

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

位置：绝对； 显示：内联块； 左：50%； 顶部：50px； 左边距：-62.5px； 边距顶部：-35px;

另一种选择是使用垂直对齐：

#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 方式。您可以改为将图像的显示更改为块或内联块。

Answer 2

您需要做的就是给父容器一个与容器本身具有相同值的行高（即 200px），然后为图像设置一个垂直对齐：中间。

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

见：http://jsfiddle.net/B78nD/