垂直居中在具有动态高度的图像上的一些文本 [英] Vertical Centering some Text over an Image with Dynamic Height

问题描述

无论出于什么原因，我真的在与自己打败这个...毫无疑问，因为缺乏一个真正的正确的方式垂直中心任何东西的支持。

For whatever reason I am really beating myself up with this... No doubt because of the lack of support for a real "proper" way of vertically centering anything.

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

Is to have a set of four images, each inside their own responsive columns. Each image has a white overlay, that when hovered reveals more of the image, as well as a title for each of the 4 images that is horizontally and vertically centered inside the image.

我可以很容易地实现这一点，如果我设置特定的宽度/高度和卡住的CSS而不是HTML的图像。对于SEO的原因，我想要的图像存在于HTML。

I could easily achieve this if I set specific width/heights and stuck the image inside CSS rather than the HTML. For SEO reasons I want the image to be present in the HTML.

此外，由于响应的性质，图像必须缩放到它们所在列的宽度的100％。因此，因为宽度尺度，

Additionally because of the responsive nature, the images must scale to 100% of the width of the column they reside in. Consequently, because the width scales, the height scales as well.

所以第一个问题是获取caption，因为我在我的类中调用它，出现在图像的顶部。使用简单的 position：absolute; 以及 top：0; 和 left

So the first issue is getting the "caption" as I am calling it in my classes, to appear over the top of the image. Easily done with a simple position: absolute; as well as top: 0; and left: 0; on the caption and position: relative; on the container.

以下是 JS小提琴

Here is a 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，所以伪类不打扰我。

Any ideas on how to achieve this? I would like to stay at least IE8 supported, and I am using selectivizr already, so pseudo-classes don't bother me.

推荐答案

<首先，我不知道你的意思是什么。但正如你所提到的：

First, I wasn't sure about what you mean exactly. But as you mentioned:

问题在于文本图库1 图像的顶部。使用简单的 text-align 可以很容易地将它水平居中，但是垂直居中对我来说很重要。

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.

这是我尝试垂直对齐图像上的文本。实际上，此概念来自 这种方法 在SO上的类似主题：

Here is my attempt to align the text vertically over the image. Actually the concept comes from this approach of a similar topic on 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（））。

This relies on CSS2.1 and it will definitely work on IE8+ (excluding rgba()).

这篇关于垂直居中在具有动态高度的图像上的一些文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！