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

I'm building a template with Twitter Bootstrap and trying to get a text centered horizontally and vertically above a image, for example:

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

I'm trying with this:

我正在使用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;}

With this, if I use some value to top to the div title it appears above the img, but I can't get to center it neither horizontally or vertically.

有了这个,如果我使用一些值来顶部到div标题它出现在img上面,但我不能在水平或垂直中心。

It doesn't work either with all I searched until now: left:50%, left:0 and right:0; margin:auto, etc...

直到现在我搜索的所有内容都不起作用:left:50%,left:0和right:0;保证金:汽车等...

Also I'm not looking for to use the img as a css background.

此外,我不是要将img用作css背景。

How can I get this right?

我怎样才能做到这一点?

3 个解决方案

#1

Your current code doesn't work because you are not applying top:0 and width:100% or left and right values. You also need to add position:relative to box so that the absolutely positioned title will place correctly. My suggestion to center the variably tall title is to use display:table-cell. The only problem with this (other than compatibility) is that it also requires another element added (some wrapping element around the text of .title). You can see this solution demonstrated here: http://jsfiddle.net/dx44c/3/

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

Compatibility for table-cell: http://caniuse.com/#search=table

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

required markup:

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

the CSS needed:

需要的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%;
}

edit: better example added with more text and some padding on the table-cell

编辑:更好的示例添加了更多文本和表格单元格上的一些填充

#2

to put the title in center horizontally just give the .title text-align: center; make the position relative and give a bottom 60%; like the bellow one:

将标题水平放在中心只需给出.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>

#3

CSS Flexbox is another option for vertical centering.

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

Demo: http://jsfiddle.net/cQ5GG/ (add additional vendor prefixes if needed)

演示: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>

#1