目标：

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

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

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

所以第一个问题是获取“标题”，因为我在我的课程中调用它，显示在图像的顶部。使用简单的position: absolute;以及标题上的top: 0;和left: 0;以及容器上的position: relative;轻松完成。

最大的问题和第二个问题是将“图库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可以轻松地将其水平居中，但垂直居中是我的目的。

这是我尝试在文本上垂直对齐文本。实际上，这个概念来自于SO上类似主题的 this approach ：

.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路线。

使用动态高度垂直居中图像上的某些文本

目标：

2 个答案: