在引导列中的图像下居中标题

Question

我使用CSS在bootstrap col-md-4中对图像进行大小和居中处理，除了实际的标题容器外，一切都正常。我使用了text-align，它以文本为中心，但无法弄清楚如何对齐整个字幕中心。我是否需要弄清楚它的像素和边距？感谢您的帮助，我确信这很简单！ http://http://codepen.io/chiggory/pen/xOZXQB

 <div class="container">
     <div class="row">
         <div class="col-md-4 border"><a href="#"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>

<div class="caption">Test</div>
     </div>
 </div>

.size {
  height: 230px;
  width: 230px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border:5px solid #800000;
}

 .caption {
    font-size: 20px;
    color: white; 
    text-align: center;
    background-color: #800000;
    width: 230px;
}

Answer 1

使用Bootstrap center-block类..

<div class="caption center-block">Test</div>

http://codeply.com/go/UD1wOD7iLW

Answer 2

有些时候你需要的是Bootstrap text-center class：

<div class="caption text-center">Text here</div>

Answer 3

只需将margin-left: auto; margin-right: auto;添加到标题上，就像在图片上一样。

＆＃13;

＆＃13;

.size {
  height: 230px;
  width: 230px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border:5px solid #800000;
}

 .caption {
    font-size: 20px;
    color: white; 
    text-align: center;
    background-color: #800000;
    width: 230px;
   
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

 <div class="container">
     <div class="row">
         <div class="col-md-4 border"><a href="#"><img class="img-responsive      size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>

<div class="caption">Test</div>
     </div>
 </div>

＆＃13;

＆＃13;

＆＃13;

要使它们具有相同的尺寸，您需要将图像上相同的边框添加到标题中，或者将box-sizing: border-box添加到图像中。

Answer 4

在自举列

中的图像下居中标题

versi minify

＆＃13;

＆＃13;

.size{height:auto;width:100%;display:block;margin-left:auto;margin-right:auto;border:5px solid maroon;box-sizing:border-box}.caption{font-size:20px;color:#fff;background-color:maroon;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center}.display-container{position:relative;height:230px;width:230px;//float:left;//display:block}

＆＃13;

<div class="container"><div class="row"><div class="col-md-4 border display-container"> <a href="#"> <img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" /> </a><div class="caption center-block">Test</div></div></div></div>

＆＃13;

＆＃13;

＆＃13;