html - 如何响应地将绝对 div(文本)置于相对 div(图像)之上？

Question

我正在使用 Twitter Bootstrap 构建一个模板，并尝试让文本在图像上方水平和垂直居中，例如:



我正在尝试这样做:

<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="..."></div>
           <div class="title">Post title</div>
        </div>

    </div> <!--Bootstrap-->
  </div> <!--Bootstrap-->
</div> <!--Bootstrap-->

.box {height:350px; width:100%; border:4px solid #fff;}
.thumb {position:relative; width:100%; height:100%; overflow: hidden;}
.thumb img{width:100%; height:100%; overflow: hidden;}
.title {position:absolute;}

有了这个，如果我使用一些值 top 到 div title 它会出现在 img 上方, 但我无法使其水平或垂直居中。

直到现在，它也不适用于我搜索的所有内容:left:50%、left:0 和 right:0； margin:auto 等...

此外，我不希望将 img 用作 css 背景。

我怎样才能做到这一点？

Answer 1

您当前的代码不起作用，因为您没有应用 top:0 和 width:100% 或 left 和 正确的值。您还需要将 position:relative 添加到 box 以便绝对定位的标题正确放置。我的建议是使用 display:table-cell 来居中高度可变的标题。唯一的问题(除了兼容性)是它还需要添加另一个元素(一些环绕 .title 文本的元素)。您可以在此处看到此解决方案:http://jsfiddle.net/dx44c/3/

表格单元格的兼容性:http://caniuse.com/#search=table

必需的标记:

    <div class="box">
        <div class="thumb"><img src="//lorempixel.com/712/342"></div>
        <div class="title"><div>Post title</div></div>
    </div>

所需的 CSS:

.box {position: relative; height:350px; width:100%; border:4px solid #fff;}
.thumb {position:relative; width:100%; height:100%; overflow: hidden;}
.thumb img{width:100%; height:100%; overflow: hidden;}
.title {
    position:absolute;
    background: rgba(0,0,0,0.5);
    color: white;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;
}
.title div {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20%;
}

编辑:更好的示例在 table-cell

上添加了更多文本和一些填充