On: How to Center in CSS (2015)

[ChrisMarshallNY]

Here's what I've been doing for years (The <div> can be any element, like <ul>):

<div id="wrapper" style="text-align:center"> <div id="wrapped" style="display:table;margin-left:auto;margin-right:auto;text-align:left"></div> </div>

WFM YMMV

[RyanGoosling → ChrisMarshallNY]

You don't need the style="text-align:center" on your wrapper element

[ChrisMarshallNY → RyanGoosling]

> You don't need the style="text-align:center" on your wrapper element

Why not? The goal is to center something with an unpredictable size.

display:block adapts to the container. display:table adapts to the contents.

This uses both.

[RyanGoosling → ChrisMarshallNY]

A box isn't text. Why don't you give it a whirl.

[ChrisMarshallNY → RyanGoosling]

Oh, I see. Gotcha. I use it for images and lists, so I've gotten used to it.

Cool. Thanks!

[mattwad → ChrisMarshallNY]

you really use the same id twice on a page?! Heresey! Also.. I do the same (essentially: margin: 0 auto) but it works with display: block too, and you don't need text-align center on the parent.

[bzb3 → mattwad]

It's not the same id: wrapper vs wrapped

[ChrisMarshallNY → bzb3]

They were not IDs. They were indicators of what the div is for.

It was sort of HTML-pseudocode.

In any case, this is exactly how you center something that doesn't try to stretch across the entire page. It's old-fashioned, but robust.

Also, I would generally not use inline CSS. I think of it like I think of !important: the nuclear option.

That said, I tend to use inline styles a lot for WordPress site content, because I don't want to deal with the slow-ass "customize" option.