Question

我正在创建一个博客页面，我希望页面上的所有内容都集中在一起。它只是一列，我不打算引入任何额外的列，至少不会很快。为了使页面上的所有内容居中，我将所有内容都包含在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;
}

Bootstrap 3：center-block不适用于max-width

1 个答案: