在 bootstrap 列的图像下方居中放置标题

Question

我正在使用 CSS 调整 bootstrap col-md-4 中图像的大小和居中位置，除了实际的字幕容器外，一切都居中。我使用 text-align 将文本居中，但无法弄清楚如何对齐整个标题中心。我需要弄清楚像素和 margin-left 吗？感谢您的帮助，我相信这很容易！ 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

只需将 margin-left: auto; margin-right: auto; 添加到图片说明即可。

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

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

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

Answer 2

使用 Bootstrap center-block class..

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

http://codeply.com/go/UD1wOD7iLW

Answer 3

在 bootstrap 列的图像下方居中放置标题

versi 缩小

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

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

Answer 4

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

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

在 bootstrap 列的图像下方居中放置标题

Center a caption under an image in bootstrap column

css

image

twitter-bootstrap

caption

在 bootstrap 列的图像下方居中放置标题