Question

This has been asked before by other people, but I’ve never seen an adequate answer. Is there a valid replacement to the <center> tag?

I know there’s margin: 0 auto;, but that requires setting a width. There’s also align="center", but I believe that that’s invalid code as well.

Is there something as simple as <center> that’s valid? There are rare occasions where I still end up using it, even though it is deprecated. Just today, I ended up using a <center> to center the one button that needed centered on a web page. Yes, I could have set the width and gave it margin: 0 auto, but that’s a lot of work for centering one single element, and it dirties up my code, which I take pride in keeping orderly. I don’t really understand why <center> was deprecated in the first place, if nothing has replaced it.

Thanks!

Answer 1

text-align: center is what you should use. In fact, the ideal way is this:

.center {
    text-align: center;
}
.center > div, .center > table /* insert any other block-level elements here */ {
    margin-left: auto;
    margin-right: auto;
}

Obviously, it’s not quite as simple as you might hope for.

Personally, I just use:

.center {text-align: center;}
.tmid {margin: 0px auto;}

Then apply classes where needed.