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

Question

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

目标：

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

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

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

所以第一个问题是让我在课堂上调用它的“标题”出现在图像的顶部。使用简单的position: absolute; 以及标题上的top: 0; 和left: 0; 以及容器上的position: relative; 即可轻松完成。

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

这是一个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

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

问题是文本Gallery 1 垂直居中于图像顶部。使用简单的text-align 将其水平居中很容易，但垂直居中是我无法理解的。

这是我尝试在图像上垂直对齐文本。其实这个概念来自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()）。

Answer 2

如果我正确理解您的问题，这可能对您有用：

Working Demo

如果您需要在悬停时缩放图像，那么只需在容器上添加 :hover 并更改其宽度即可。

CSS：

.container {
    // existing styles
    -webkit-transition: all .2s; // needs prefixes for other browsers.
}

.container:hover {
    width: 500px;
}

唯一的问题是transition 不支持 IE9 或更早版本。所以如果这是一个问题，你需要走 JS 路线。