Center a caption under an image in bootstrap column
<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>