[解決済み] ブートストラップカラムで画像の下にキャプションを中央配置する

質問

ブートストラップのcol-md-4でCSSを使って画像のサイズとセンタリングを行なっていますが、実際のキャプションコンテナを除いて、すべてうまくセンタリングされています。テキストを中央揃えにする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;
}

解決方法は？

Bootstrapを使用する center-block クラスがあります。

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

http://codeply.com/go/UD1wOD7iLW