具有多个 DIV 标记的中心引导列

Posted 2023-03-29

【中文标题】具有多个 DIV 标记的中心引导列

【英文标题】：Center Bootstrap column with multiple DIV tags

【发布时间】：2015-09-19 05:15:16

【问题描述】：

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

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

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

【问题讨论】：

你试过text-center和center-block吗？

我想使用引导网格，以便它在手机上正确折叠...

如果您只有 1 项居中，则不需要网格。

没错，但我有两个项目 - 一个图像和一些文本。

【参考方案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;

【讨论】：

这很接近，但我将如何设置图像的宽度？如果我设置了一个固定宽度的内联，它会超过 img-responsive。

您应该使用百分比。例如：宽度：60%；

我做了一些改进。你能告诉我这是否更好用吗：bootply.com/JCazfsp1Pt

【参考方案2】：

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

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

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