Question

我想创建一个带有居中内容的号召性用语框

该框包含两行第一行具有标题，第二行具有可变数量的图像，最多为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>

我尝试了多种设置，但中心块似乎并未将col-md-9置于中间位置。（即使它确实适用margin: 0 auto;）

如何在容器中心创建等宽图像，数量可变。我正在使用基于Twitter Bootstrap 3的Unify Template

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中心可变数量的图像

1 个答案: