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

问题描述

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

目标:

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

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

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

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

第二个问题是大问题，是将画廊 1"文本垂直居中放置在图像顶部.我必须使用我上面提到的 position: absolute; 位来使文本​​位于图像的顶部.从那里我无法获得 display: table; 解决方案，也无法获得 -50% 边际解决方案.

这是一个JS小提琴

我的HTML:

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

关于如何实现这一目标的任何想法?我想至少支持 IE8，而且我已经在使用 selectivizr，所以伪类不会打扰我.

解决方案

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

<块引用>

问题是将文本 Gallery 1 垂直居中放置在图像顶部.使用简单的 text-align 可以轻松将其水平居中，但我无法将其垂直居中.

这是我尝试在图像上垂直对齐文本.实际上这个概念来自 这种方法关于SO的类似主题:

.container { position: relative;}.container img {垂直对齐:底部；/* 去除内嵌图像底部的间隙 */最大宽度:100%；}.标题 {位置:绝对；顶部:0；底部:0；左:0；右:0；字体:0/0 一个；/* 移除 inline(-block) 元素之间的间隙 */}.caption:之前{内容: ' ';显示:内联块；高度:100%；垂直对齐:中间；}.caption a {字体:16px/1 Arial，无衬线；/* 重置字体属性 */显示:内联块；垂直对齐:中间；文字对齐:居中；背景:RGBA(255, 255, 255, 0.75);宽度:100%；填充:1% 0;/* 为演示添加了一个相对填充 */}

工作演示.>

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

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.

The Goal:

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.

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.

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.

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.

The big problem and second issue, is vertically centering the "Gallery 1" text over the top of the image. I have to use the position: absolute; bit as I mentioned above just to get the text over-top of the image. From there I can't manage to get a display: table; solution to work, nor a -50% margin solution to work.

Here is a JS Fiddle

My 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>

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:

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.

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.

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

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