2

我最初使用表格/表格单元格显示方法将文本垂直居中，效果很好。当我切换到容器的百分比高度并使用块级图像（与相关文本同级）来设置容器的大小时，问题就来了。在不声明静态容器大小的情况下，我无法再让绝对定位的文本等于容器高度。显然这很容易用 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;
}
4

2 回答 2

4

使用 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创建一个匿名表，并指定 100% 的宽度和高度，使其扩展并填充.display: table.panel.header-container

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

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

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

于 2013-05-24T11:48:41.053 回答
1

你.header-container需要width:100%吗？你可以用像素代替吗？

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

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

基本上，margin-left必须等于widthfornt 中的一半和一个减号，然后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%');

});
于 2013-05-23T20:06:40.687 回答