title: Center a caption under an image in bootstrap column
body: <p>I'm using CSS to size and center images in bootstrap col-md-4's and everything is centering ok except the actual caption container. I used text-align which centered the text but can't figure out how to align the entire caption center. Do I need to figure out the pixels and margin-left it? Thanks for any help, I'm sure it's easy! <a href="http://http://codepen.io/chiggory/pen/xOZXQB" rel="nofollow">http://http://codepen.io/chiggory/pen/xOZXQB</a></p>
  
  <pre><code> &lt;div class="container"&gt;
       &lt;div class="row"&gt;
           &lt;div class="col-md-4 border"&gt;&lt;a href="#"&gt;&lt;img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"&gt;&lt;/a&gt;
  
  &lt;div class="caption"&gt;Test&lt;/div&gt;
       &lt;/div&gt;
   &lt;/div&gt;
  
  .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;
  }
  </code></pre>