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

Posted 2023-03-05

【中文标题】Bootstrap 3：中心块不适用于最大宽度[重复]

【英文标题】：Bootstrap 3: center-block doesn't work with max-width [duplicate]

【发布时间】：2018-08-19 14:47:09

【问题描述】：

我正在制作一个博客页面，我希望页面上的所有内容都居中。这只是 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>

【问题讨论】：

注意：<link> 标签不使用或不需要结束斜线，而且从来没有。

将margin: auto; 添加到.article 类

center-block 应该与文章类一起使用

在我的情况下，将文章类居中没有意义，因为在我提供的示例中，页面将包含比单个文章类更多的内容：每页多篇文章、分页、页脚等.，并且我希望它们都居中，所以我想一次将它们全部居中，而不是单独居中。

看起来margin: auto; 是答案，max-width 搞砸了边距。谢谢@RajanBenipuri

【参考方案1】：

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

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