Html 如何将div的内容与向左浮动的内容元素居中对齐？

我正在尝试构建一个简单的图像库，其中库项目放置在一个div中。但由于项目是向左浮动的，因此在添加文本align:center；到父分区。我使用引导3，父分区是面板主体。内容物位于面板主体中

CSS:

HTML:

文本对齐：居中；使用浮动时将不起作用。使用内联块

请参阅下面的代码

.小组委员会{ 文本对齐：居中； } .图像框{ 显示：内联块； 左边距：-4px； } .图像框img{ 宽度：128px； 高度：128px； } 陈列室

图像描述

图像描述

图像描述 文本对齐：居中；使用浮动时将不起作用。使用内联块

请参阅下面的代码

.小组委员会{ 文本对齐：居中； } .图像框{ 显示：内联块； 左边距：-4px； } .图像框img{ 宽度：128px； 高度：128px； } 陈列室

图像描述

图像描述

图像描述 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>

请参见演示：

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>

---

请参阅演示：

谢谢。我能理解为什么这看起来是可行的，但这绝对不是完美的解决方案。谢谢。我能理解为什么这看起来是可行的，但这绝对不是完美的解决方案。谢谢。很好用！谢谢很好用！

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

 .image-box {
    float: left;
  }

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