Bootstrap 3 将浮动列与中心对齐

Question

我在引导程序中显示了一个包含 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>

现在，我面临的挑战是我无法将这些元素置于中心位置。我尝试过使用margin: 0 auto，将它们设为table-table-cell，甚至尝试了inline-block 技巧。但似乎没有任何效果。你能帮我解决这个问题吗？谢谢。

这是小提琴http://jsfiddle.net/WJ3U9/2/的链接

Answer 1

第一

改变你的：

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

到

<div class="container">

因为你的标记首先是不正确的。那么，

将此添加到您的标记 css .....（只是检查了它的宽屏，而不是小屏幕）

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

demo here

Answer 2

你试过text-align: center;吗？

我认为默认对齐是左！

你可以试试看！