如何使用Bootstrap将图像居中显示在图像上？

Question

在我的网站上有一个＆＃34;我们提供什么＆＃34;部分。我在本节中放置了三个带文字的图像。我希望文本和绿色背景集中在所有设备上的图像上。我使用了以下代码，但它不起作用。

Bootstrap HTML code：

row.iter().fold("", |tab, col| { print!("{}{:?}", tab, col); "\t" });

我的自定义CSS代码：

<div class="row text-center">
    <h1>What we offer</h1>
    <hr class="separator">
    <div class="col-sm-4">
        <div class="we-offer">
            <img src="images/multiple-food_01.png" alt="" class="img-responsive center-block">
            <h3>Cooking Classes</h3>
        </div>
    </div>    
</div>

现在的样子： 您能否告诉我如何将.we-offer h3 { position: absolute; top:30%; text-align: center; left: 0; right: 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; border-right: 1px solid #fff; padding: 10px; color:#fff; background-color: rgb(162, 173, 0); background-color: rgba(162, 173, 0, 0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; } 文字Cooking Classes与图像对齐到所有设备？

或多或少我想要的东西：

Answer 1

请参阅Fiddle

top: 50%; left: 50%; transform: translate(-50%, -50%);正是为了给你最终的中心。

你有一个默认的margin-top: 20px，需要将其清零。同时删除left:0;并将所有CSS更改为以下内容：

.we-offer h3 { 
   position: absolute; 
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
   white-space:nowrap;
   text-align: center;   
   margin: 0;
   border-top: 1px solid #fff; 
   border-bottom: 1px solid #fff; 
   border-right: 1px solid #fff; 
   padding: 10px;   
   color:#fff;
   background-color: rgb(162, 173, 0);    
   background-color: rgba(162, 173, 0, 0.5);    
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

请注意，您需要CSS3才能执行此操作。