如何在不声明容器大小和JS的情况下垂直居中放置绝对位置的文本? [英] How do you vertically center absolute positioned text w/o declaring container size and w/o JS?

问题描述

最初，我使用表格/表格单元格显示方法将文字垂直居中放置，效果很好.当我切换到容器的百分比高度并使用块级图像(与所讨论的文本同级)来设置容器的大小时，问题就来了.如果不声明静态容器大小，我将无法再获得与容器高度相等的绝对定位文本.显然，这很容易用JS解决，但我宁愿不走那条路.

I initially had vertically centered text using the table/table-cell display method, which worked great. The problem came when I switched to a percentage height for the container and used a block level image (sibling to the text in question) to set the size of the container. I can no longer get the absolutely positioned text to equal the container height without declaring a static container size. Obviously this is simple to solve with JS, but I'd prefer not to go that route.

我还使用picturefill.js来提供图像，因此不能将图像用作CSS背景(除非有人提出建议使其工作).

I'm also using picturefill.js to serve images, so using the image as a css background isn't an option (unless anyone has suggestions to make it work).

这是小提琴:

http://jsfiddle.net/rHZdQ/

http://jsfiddle.net/rHZdQ/

这是代码:

HTML

<div class="tile">
  <a href="#">
    <img src="#">
    <div class="header-container">
      <h2>title</h2>
    </div>
  </a>
</div>

CSS

.tile {
  position: relative;
}

img {
  display: block;
}

a {
  display: block;
  position: relative;
}

.header-container {
  display: table;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

h2 {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  z-index: 199;
}

推荐答案

使用CSS在绝对定位的图像叠加层中居中文本

考虑以下HTML代码段:

Centering Text in an Absolutely Positioned Image Overlay Using CSS

Consider the following HTML snippet:

<div class="tile">
    <div class="image-container">
        <img src="http://placekitten.com/400/400">
    </div>
    <div class="header-container">
        <div class="panel">
            <h2><span>percentage sized div</span></h2>
        </div>
    </div>
</div>

并应用以下CSS规则:

and apply the following CSS rules:

.tile {
    border: 3px solid #555;
    position: relative;
    margin: 6px;
    float: left;
}
.image-container img {
    display: block;
    height: 100%;
    width: 100%;
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header-container .panel {
    display: table;
    width: 100%;
    height: 100%;
}
.header-container .panel h2 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.header-container .panel h2 span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.5);
}

父/包含块是div.tile，它有两个子元素，.image-container是流入的，而.header-container是绝对定位的，因此是流出的.

The parent/containing block is div.tile, and it has two child elements, .image-container which is in-flow, and .header-container which is absolutely positioned and hence out-of-flow.

由于.tile处于浮动状态，它会缩小以适合内容，即.image-container中的图像，其尺寸由图像的原始高度和宽度确定.

Since .tile is floated, it shrinks-to-fit the content, which is the image in .image-container, with the dimensions determined by the native height and width of the image.

要创建覆盖，.header-container绝对位于其相对放置的父对象的顶部和左侧，其宽度和高度为100％，迫使其延伸到包含块(请参见黄色轮廓).

To create the overlay, .header-container is absolutely positioned to the top and left of its relatively positioned parent, with 100% width and height which forces it to extend to the containing block (see yellow outline).

在.header-container内，通过将display: table设置为.panel来创建匿名表，并指定100％的宽度和高度，以便其扩展并填充.header-container.

Within .header-container, create an anonymous table by setting display: table to .panel, and specify 100% width and height so it extends and fills the .header-container.

最后，在.panel的嵌套<h2>元素上定义一个匿名表格单元，并应用text-align: center和vertical-align: middle将文本发布水平和垂直居中.

Finally, define an anonymous table-cell on .panel's nested <h2> element, and apply text-align: center and vertical-align: middle to center the text post horizontally and vertically.

请注意，表格单元格将扩展表格的整个宽度和高度，因此，如果您想使用边框或背景为文本设置样式，则需要将其包装为内联块元素(<span>例如).

Note that the table-cell will extend the full width and height of the table so if you want to style the text with a border or background, you need to wrap it an inline-block element (the <span> in my example).

您可以在以下位置查看代码: jsFiddle演示

You can view the code at: jsFiddle Demo

这篇关于如何在不声明容器大小和JS的情况下垂直居中放置绝对位置的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！