Question

我最初使用table / table-cell显示方法使用垂直居中的文本，效果很好。当我切换到容器的百分比高度并使用块级图像（兄弟对相关文本）来设置容器的大小时，问题出现了。在不声明静态容器大小的情况下，我无法再将绝对定位的文本与容器高度相等。显然这很容易用JS解决，但我不想走这条路。

我也使用picturefill.js来提供图像，因此使用图像作为css背景不是一种选择（除非有人建议使其工作）。

这是小提琴：

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;
}

Answer 1

使用CSS

在绝对定位的图像叠加中居中文本

请考虑以下HTML代码段：

<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规则：

.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是绝对定位的，因此不在流

自.tile浮动后，它会缩小以适应内容，即.image-container中的图像，其尺寸由图像的原始高度和宽度决定。

要创建叠加层，.header-container绝对位于其相对定位的父级的顶部和左侧，100％的宽度和高度会强制它延伸到包含块（请参见黄色轮廓）。

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

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

请注意，表格单元格将扩展表格的整个宽度和高度，因此如果要使用边框或背景设置文本样式，则需要将其包装为内嵌块元素（<span>在我的例子中。）

您可以在以下位置查看代码： jsFiddle Demo

Answer 2

您的.header-container需要width:100%吗？你可以使用像素吗？

如果您使用像素并执行以下操作，那么它将使其居中：

.header-container {
  display: table;
  height: 100%;
  left: 50%;
  position: absolute;
  top: 0;
  width: 400px;
  margin-left:-200px;
}

基本上，margin-left必须等于width的一半和fornt的减号然后left:50%

更新：

在通知我必须只有百分比之后，Jquery就是这样：

$(document).ready(function() {

    var minus = '-';
    var headerwidth = $(".header-container").width();
    $(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
    $(".header-container").css('left','50%');

});

你如何垂直居中绝对定位文本w / o声明容器大小和没有JS？

2 个答案:

使用CSS