Html 引导3将浮动列对齐到中心

我正在引导中显示一个包含3行的信息块。我正在使用bootstrap cols使这些响应速度更快。对于较小的屏幕，我使用col-sm-4，对于较大的屏幕，我使用col-lg-3，以使我的图像适合

   <div class="container clearfix row" style="
width: 100%;
display: table;
margin: 0 auto;">
        <!-- post list -->
        <div class="test col-sm-4 col-md-4 col-lg-3" style="
                display: table-cell;
                margin: 0 auto;">
          <figure>
            <img alt="" src="assets/icons/find-awesome-stories.png">
            <figcaption>
              <span>
                test3
              </span>
            </figcaption>
            <!-- / post item wide -->
          </figure>
        </div>
        <div class="test col-sm-4 col-md-4 col-lg-3" style=" display: table-cell;        margin: 0 auto;">
          <figure>
            <img alt="" src="assets/icons/make-them-yours.png">
            <figcaption>
              <span>
                test 1
              </span>
            </figcaption>
          </figure>
        </div>
        <div class="test col-sm-4 col-md-4 col-lg-3" style="
display: table-cell;
margin: 0 auto;">
          <figure>
            <img alt="" src="assets/icons/show-it-off.png">
            <figcaption>
              test2
            </figcaption>
          </figure>
        </div>
        <div class="clear"></div>
      </div>

测试3
测试1
测试2

现在，我的挑战是我不能集中这些元素。我尝试过使用

margin:0auto

，使它们成为

表格单元格

，甚至尝试了

内联块

技巧。但似乎什么都不管用。你能帮我做这个吗？谢谢

---

这是小提琴的链接

您是否尝试过

文本对齐：居中

我认为默认的对齐方式是左对齐

你可以试试看
 首先

更改您的：

<div class="container clearfix row" style=" width: 100%; margin: 0 auto;">

是的，但我的容器也有图像。那没用。你误会我了。我并没有试图将我的图像放在.test div中居中。我只是试图将这三张卡放在容器中居中。问题是大屏幕上的总列大小是col-lg-9，我需要将其居中。没错。。。极为错误…糟糕的咖啡总是会产生糟糕的结果…因此，即使您在
12网格上使用
col-lg-3
布局，您也希望
container
内容居中…对吗？@skmvasu:更改了整个答案…请检查后回复！！
<div class="container">

.test {
    border:1px solid #000;
    margin: 0 auto;
    overflow:hidden;
}
figure > img {
    width:100%; /* make image fit inside div*/
    height:auto;
}