Twitter Bootstrap/Unify 中心变量图像

Question

我想创建一个内容居中的call-to-action框

该框包含两行第一行有标题，第二行是可变数量的图像，最多 12 个（如果大于，则为三行或更多行）。

文本使用 .text-center 完美居中。但是我无法创建具有内容宽度的 div。

我现在拥有的：

<div class="container">
    <div class="row">
        <div class="col-md-12" style=" padding: 10px 0 0;">
            <div class="row text-center">
                <div class="col-md-12 animated fadeInLeft">
                    <span class="color-green">Title</span>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-md-9 center-block">
                    <!-- Content / Images-->
                </div>
            </div>
        </div>
    </div>
</div>

我尝试了多种设置，但 center-block 似乎没有将 col-md-9 放在中间。（即使它确实适用 margin: 0 auto;）

我该怎么做才能在其容器的中心创建宽度可变的等宽图像。我正在使用基于 Twitter Bootstrap 3

的统一模板

Answer 1

由于 text-center 仅影响 inline 级元素（子级），您需要将它们设为内联。很明显。所以你需要做的就是使 <div class="col-md-9 center-block"> 内联。这样做：

.center-block {
  display: inline-block;
  float: none;
}

如果你想在没有javascript的情况下在一行中推送不超过12张图片，我认为唯一的方法是：

.center-block img {
  width: 8.2%;
}

Twitter Bootstrap/Unify 中心变量图像

Twitter Bootstrap/Unify center variable amount of images

html

css

center

twitter-bootstrap

twitter-bootstrap-3