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

Question

我正在使用 CSS 来调整引导程序 col-md-4 中的图像大小和居中，除了实际的标题容器之外，一切都居中。我使用了文本对齐，它使文本居中，但不知道如何对齐整个标题中心。我需要弄清楚像素和边距吗？感谢您的帮助，我相信这很容易！ 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;
}

原文由 Erich Sterzing 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用引导 center-block 类..

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

http://codeply.com/go/UD1wOD7iLW

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有时您需要的是 Bootstrap text-center 类：

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

原文由 swngstack 发布，翻译遵循 CC BY-SA 3.0 许可协议