0

I'm making a blog page and I want everything on the page be centered. It's just 1 column, I'm not going to introduce any extra columns, at least not soon. To center everything on the page I wrap everything into a div of center-block class. That works great, until I set max-width:28em on the article's text, which makes it render a little off center and more to the left.

Here are examples. Check on "Full page" mode.

Without max-width:28em: centering works great, but the article text is too wide.

<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>

With max-width:28em: centering is broken but article's text is of good width.

.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>
Hot Coffee
  • 3
  • 1
  • 1
  • 5
  • Note: the `` tag does not use or need a closing slash and never has. – Rob Mar 11 '18 at 13:51
  • add `margin: auto;` to `.article` class – Rajan Benipuri Mar 11 '18 at 14:09
  • `center-block` should go with article class – Temani Afif Mar 11 '18 at 14:13
  • Centering the article class doesn't make sense in my case, as the page will have more stuff than just a single article class in the example I provided: multiple articles per page, pagination, footer, etc., and I want them all to be centered, so I want to center them all at once, rather than centering all of them individually. – Hot Coffee Mar 11 '18 at 14:22
  • Looks like `margin: auto;` is the answer, `max-width` messes up with margins. Thanks @RajanBenipuri – Hot Coffee Mar 11 '18 at 14:35
  • `center-block` contains the margin:auto and should be used with the class article not above it – Temani Afif Mar 11 '18 at 14:41

1 Answers1

0

If "I want everything on the page be centered" means text centered, you shall use .text-center helper. Or else, use:

.article {
max-width: 28em;
margin: 0 auto;
}
Mateus Gabi
  • 99
  • 1
  • 2