divのコンテンツを左側に浮かべたコンテンツ要素の中央に配置するにはどうすればよいですか？

Question

ギャラリーアイテムがdivに配置されている単純なイメージギャラリーを作成しようとしています。しかし、アイテムは左に浮かれているので、追加すると全体的に中央に配置されません。text-align：center;を親divに追加します。 （私は、ブートストラップ3使用していますし、親のdivがパネル体ある内容がパネル体にある。。）

CSS：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<style type="text/css" media="screen"> 
    .image-box { 
     float: left; 
    } 

    .image-box img { 
     width: 128px; 
     height: 128px; 
    } 
</style> 

HTML：

<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
     <h3 class="panel-title">GALLERY</h3> 
    </div> 
    <div class="panel-body"> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
     <div class="image-box"> 
      <img src="member-icon.png"> 
      <P class="caption">Image Description</P> 
     </div> 
    </div> 
</div> 

Answer 1

text-align：center;はフローティングを使用すると動作しません。インラインブロックを使用します。

参照してくださいコードの下

.panel-body { 
 
    text-align: center; 
 
} 
 
.image-box { 
 
    display: inline-block; 
 
    margin-left: -4px; 
 
} 
 
.image-box img { 
 
    width: 128px; 
 
    height: 128px; 
 
}

<div class="panel panel-default"> 
 
    <div class="panel-heading text-center"> 
 
     <h3 class="panel-title">GALLERY</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
     <div class="image-box"> 
 
      <img src="http://placehold.it/300x300"> 
 
      <P class="caption">Image Description</P> 
 
     </div> 
 
    </div> 
 
</div>

Here is a live demo

申し訳ありませんの悪い英語

Answer 2

HTMLファイル用：

<div class="panel panel-default"> 
    <div class="panel-heading text-center"> 
    <h3 class="panel-title">GALLERY</h3> 
    </div> 
    <div class="panel-body"> 
    <div class="col-md-offset-4 col-xs-offset-3"> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    <div class="image-box"> 
     <img src="member-icon.png"> 
     <p class="caption">Image Description</p> 
    </div> 
    </div> 
</div> 
</div> 

CSSファイル：

.image-box { 
    float: left; 
    } 

.image-box img { 
    width: 128px; 
    height: 128px; 
    padding:15px; 
    } 

参照デモ：Div content center in panel body