html - 在具有动态高度的图像上垂直居中一些文本

Question

无论出于何种原因，我真的为此而自责......毫无疑问，因为缺乏对垂直居中任何东西的真正“正确”方式的支持。

目标:

是一组四张图片，每张图片都在自己的响应列中。每张图片都有一个白色叠加层，悬停时会显示更多图片，以及 4 张图片中每张图片的标题，标题在图片内水平和垂直居中。

如果我设置特定的宽度/高度并将图像放在 CSS 而不是 HTML 中，我可以很容易地实现这一点。出于 SEO 的原因，我希望图像出现在 HTML 中。

此外，由于响应性质，图像必须缩放到它们所在列的宽度的 100%。因此，由于宽度缩放，高度也会缩放。

所以第一个问题是让“标题”出现在图像的顶部，正如我在类里面所说的那样。使用简单的 position: absolute; 以及标题和 position 上的 top: 0; 和 left: 0; 即可轻松完成: 相对; 在容器上。

最大的问题和第二个问题是将“Gallery 1”文本垂直居中放置在图像顶部。我必须使用上面提到的 position: absolute; 位来使文本​​位于图像之上。从那里我无法设法使 display: table; 解决方案起作用，也无法使 -50% margin 解决方案起作用。

这是一个 JS Fiddle

我的HTML:

<div class="container">
    <img src="http://lorempixel.com/output/city-q-c-640-480-8.jpg" />
    <div class="caption">
        <a href="#">Gallery 1</a>
    </div>
</div>

关于如何实现这一点有什么想法吗？我希望至少支持 IE8，并且我已经在使用 selectivizr，所以伪类不会打扰我。

Answer 1

首先，我不确定您的确切意思。但是正如您提到的:

The issue is centering the text Gallery 1 vertically over the top of the image. Centering it horizontally is easy with a simple text-align but centering it vertically is what is eluding me.

这是我尝试在图像上垂直对齐文本。其实这个概念来自 this approach 关于 SO 的类似主题:

.container { position: relative; }

.container img {
    vertical-align: bottom; /* Remove the gap at the bottom of inline image */
    max-width: 100%;
}

.caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font: 0/0 a; /* Remove the gap between inline(-block) elements */
}

.caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle;    
}

.caption a {
    font: 16px/1 Arial, sans-serif; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:center;
    background: rgba(255, 255, 255, 0.75);
    width: 100%;
    padding: 1% 0; /* Added a relative padding for the demo */
}

WORKING DEMO .

这依赖于 CSS2.1，它肯定会在 IE8+ 上工作(不包括 rgba())。