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

Question

无论出于何种原因,我真的打败了自己...毫无疑问,因为缺乏对垂直居中任何事物的真正"正确"方式的支持.

目标:

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

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

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

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

最大的问题和第二个问题是将"图库1"文本垂直居中放在图像的顶部.我必须使用position: absolute;上面提到的位来获取图像的顶部文本.从那里我无法找到display: table;工作的解决方案,也无法获得-50%的保证金解决方案.

这是一个JS小提琴

我的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的类似主题的这种方法:

.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 */
}

工作演示.

这依赖于CSS2.1,它肯定适用于IE8 +(不包括rgba()).