将div与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,display:block,vertical-align:middle).

编辑:在这里张贴小提琴:http://jsfiddle.net/DE4ph/2/

另外 - 重复的答案解决方案不适合,因为我无法(轻松)将标记更改为WordPress生成的标记.

Answer 1

众多选项之一是将容器div设置为position:relative，然后将以下样式添加到锚点：

位置：绝对；显示：内联块；左：50%；顶部：50 像素；左边距：-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 方式。您可以改为将图像的显示更改为块或内联块。