Bootstrap 3：中心块不适用于最大宽度[重复]

Question

我正在制作一个博客页面，我希望页面上的所有内容都居中。这只是 1 列，我不会介绍任何额外的列，至少不会很快介绍。为了使页面上的所有内容居中，我将所有内容包装到 center-block 类的 div 中。效果很好，直到我在文章的文本上设置了max-width:28em，这使它呈现出一点偏离中心并且更偏向左侧。

以下是示例。勾选“整页”模式。

没有max-width:28em：居中效果很好，但是文章文本太宽了。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section id="content" class="container">
    <div class="center-block">
        <div class="article">
            <article class="article-published">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta nulla in tellus condimentum eleifend. Suspendisse purus lectus, fermentum et magna nec, egestas pretium est. Vestibulum ultrices leo nibh, quis aliquam nisl aliquam vitae. Vivamus nec fringilla ex, hendrerit dictum lorem. Suspendisse condimentum ut lectus ultrices sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean faucibus purus at malesuada consequat. Donec urna risus, imperdiet id dapibus sit amet, scelerisque ut leo. Donec arcu turpis, congue at elit et, dignissim congue lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eget malesuada tellus. Duis quis dignissim tortor. Pellentesque ac imperdiet justo, at tempor nisl. Duis sed justo nisi.</p>
            </article>
        </div>
    </div>
</section>

max-width:28em：居中被破坏，但文章的文本宽度很好。

.article {
    max-width: 28em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section id="content" class="container">
    <div class="center-block">
        <div class="article">
            <article class="article-published">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta nulla in tellus condimentum eleifend. Suspendisse purus lectus, fermentum et magna nec, egestas pretium est. Vestibulum ultrices leo nibh, quis aliquam nisl aliquam vitae. Vivamus nec fringilla ex, hendrerit dictum lorem. Suspendisse condimentum ut lectus ultrices sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean faucibus purus at malesuada consequat. Donec urna risus, imperdiet id dapibus sit amet, scelerisque ut leo. Donec arcu turpis, congue at elit et, dignissim congue lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eget malesuada tellus. Duis quis dignissim tortor. Pellentesque ac imperdiet justo, at tempor nisl. Duis sed justo nisi.</p>
            </article>
        </div>
    </div>
</section>

Answer 1

如果“我希望页面上的所有内容都居中”表示文本居中，则应使用 .text-center 助手。否则，使用：

.article {
max-width: 28em;
margin: 0 auto;
}