Question

我在bootstrap中显示一行包含3行的信息块。我正在使用bootstrap cols来使这些响应。对于较小的screns，我使用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

你试过text-align: center;吗？

我认为默认对齐是左边的！

你可以尝试一下！

Answer 2

<强>第一

改变你的：

<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

Bootstrap 3将浮动柱对准中心

2 个答案: