html - 当它是奇数时，如何将 Bootstrap 中的列居中

Question

我有以下情况:

我有一个<div class="row">然后我还有另一个<div class="col-lg-3">我将在其中放置用户个人资料的图片。问题是我想将该图片置于可用空间的中间，所以我通常会这样做:

<div class="row">
    <div class="col-lg-3 col-lg-offset-x">
        <img src="..." class="..." alt="..." title="..." data-size="...">
    </div>
</div>

<div class="col-lg-3 col-lg-offset-x"> 类的 x 值是多少如果我想将 div 居中？有人知道该怎么做吗？

Answer 1

Center a column using Twitter Bootstrap 3 的重复项

“您可以使用经过验证的 margin: 0 auto; 技术将任何列大小居中，您只需要处理 Bootstrap 网格系统添加的 float 。我建议定义一个自定义 CSS 类，如下所示:

.col-centered{
    float: none;
    margin: 0 auto;
}

现在您可以将其添加到任何屏幕尺寸的任何列尺寸，并且它将与 Bootstrap 的响应式布局无缝配合:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注意:使用这两种技术，您都可以跳过 .row 元素并将列居中于 .container 内，但由于容器类中的填充，您会注意到实际列大小的差异很小。”