Question

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

enter image description here

我试着用这个：

<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 标题，它会显示在img上方，但我不能水平或垂直居中。

直到现在我搜索的所有内容都不起作用： left：50％ ， left：0 和 右：0 ; 保证金：自动 等...

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

我怎样才能做到这一点？

Answer 1

您当前的代码无效，因为您未应用top:0和width:100%或left和right值。您还需要将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

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

Answer 2

将标题水平放在中心，只需给出.title text-align：center;使位置相对并给出60％的底部;像吼叫一样：

<head>
<style>
.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:relative; 
font-weight: bold; 
bottom: 60%;
color: white; 
text-align: center;
padding: 0px 10px;
width: 97%;
}

</style>
</head>
<body>
<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="http://cache.graphicslib.viator.com/graphicslib/media/a8/sunset-cruise-on-the-sydney-harbour-photo_5361064-fit468x296.jpg"></div>
           <div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>

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

Answer 3

CSS Flexbox是垂直居中的另一种选择。

演示： http://jsfiddle.net/cQ5GG/ （如果需要，请添加其他供应商前缀）

<style>
.thumb {
    width: 400px;
    height: 200px;
    display: -webkit-flex;
    display: flex;
}

.caption {
    margin: auto;
    text-align: center;
    color: #fff;
    font: bold 16px/150% Arial,sans-serif;
}
</style>

<div class="thumb" style="background: url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png), url(http://lorempixel.com/400/200/)">
    <div class="caption">
        This is my caption<br>
        Multiple lines<br>
        For example...
    </div>
</div>

如何将相对div（图像）上方的绝对div（文本）居中对应？

3 个答案: