带有多个DIV标签的Center Bootstrap列

Question

我想要显示一个图像，并在它旁边（在同一行）显示一些文字。 这很容易，但我也希望这些内容（图像和文本）在引导网格中居中，以便它在所有设备上保留其属性并继续缩放/折叠。

<div class="row-fluid">
    <div class="container">
        <img src="img.jpg" class="img-responsive">
        <h1>CONTENT</h1>
    </div>
</div>

我尝试过使用偏移，但无法让它工作。我应该将图像和内容包裹在跨度中吗？任何帮助表示赞赏。

Answer 1

您应该为图像和文本添加包装div，然后将其与中心对齐。

HTML：

<div class="row-fluid">
    <div class="container">
      <div class="centered">
        <img src="img.jpg" class="img-responsive">
        <h1>CONTENT</h1>
      </div>
    </div>
</div>

CSS：

.centered {
    text-align: center;
}

Answer 2

我认为您的错误是使用 row-fluid 而不是 containter-fluid 。后者将行放在中心内。

UIColor

您也可以创建自己的自定义类并将 margin：0 auto; 应用于元素。