Html 如何相应地将绝对div（文本）居中于相对div（图像）之上？_Html_Css_Twitter Bootstrap_Center_Absolute

Html 如何相应地将绝对div（文本）居中于相对div（图像）之上？

html css twitter-bootstrap

Html 如何相应地将绝对div（文本）居中于相对div（图像）之上？,html,css,twitter-bootstrap,center,absolute,Html,Css,Twitter Bootstrap,Center,Absolute,我正在用Twitter引导构建一个模板，并尝试在图像上方水平和垂直居中获取文本，例如：我正在尝试这样做： <div class="container">  <div class="row">  <div class="col-md-4">  <div class="box">

我正在用Twitter引导构建一个模板，并尝试在图像上方水平和垂直居中获取文本，例如：

我正在尝试这样做：

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


职称
.box{高度：350px；宽度：100%；边框：4px实心35; fff；}
.thumb{位置：相对；宽度：100%；高度：100%；溢出：隐藏；}
.thumb img{宽度：100%；高度：100%；溢出：隐藏；}
.title{位置：绝对；}

这样，如果我在divtitle上使用某个值，它就会出现在img上方，但我无法在水平或垂直方向将其居中

它也不适用于我到目前为止搜索的所有内容：左：50%，左：0和右：0保证金：自动等

另外，我不希望使用img作为css背景

如何正确执行此操作？

您当前的代码不起作用，因为您没有应用

顶部：0

和

宽度：100%

或

左侧

和

右侧

值。您还需要将

position:relative

添加到

box

中，以便绝对定位的标题能够正确放置。我建议使用

display:table cell

，将可变高的标题居中放置。唯一的问题（兼容性除外）是它还需要添加另一个元素（一些环绕

.title

文本的包装元素）。您可以在此处看到此解决方案：

表格单元格的兼容性：

所需标记：

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

编辑：更好的示例在

表格单元格中添加了更多文本和一些填充

将标题水平居中，只需给出标题文本对齐：居中；使位置相对，并给出底部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>


.box{位置：相对；高度：350px；宽度：100%；边框：4px实心#fff；}
.thumb{位置：相对；宽度：100%；高度：100%；溢出：隐藏；}
.thumb img{宽度：100%；高度：100%；溢出：隐藏；}
.头衔{职位：相对；
字体大小：粗体；
底部：60%；
颜色：白色；
文本对齐：居中；
填充：0px 10px；
宽度：97%；
}
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。

是垂直居中的另一个选项

演示：（如果需要，添加其他供应商前缀）


.拇指{
宽度：400px；
高度：200px；
显示：-webkit flex；
显示器：flex；
}
.标题{
保证金：自动；
文本对齐：居中；
颜色：#fff；
字体：粗体16px/150%Arial，无衬线；
}
这是我的说明

多行

例如

你能在这个项目中使用

display:table cell

吗？我试着对拇指div使用

display:table

，对标题div使用

display:table cell

加上

垂直对齐：中间对齐

，但没有成功谢谢，它成功了！但是我想因为

上的宽度：100%
和高度：100%
。title

我不能在

上使用不透明悬停效果。thumb img

（因此，

。thumb img:hover

）。有办法吗？我会改用

.box:hover.thumb img

。看起来您不需要支持IE 6，因此我认为我们可以排除它不是具有

：hover

规则的锚的问题编辑：这里有一个例子。

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

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