Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Replacement for <center>

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!

like image 404
JacobTheDev Avatar asked Jul 13 '12 20:07

JacobTheDev


People also ask

What is the alternative of center tag?

If you want center align an element, you should use css instead. You can use text-align property of css to change alignment of elements. In this example, I'm using id attribute to set alignment of paragraph. Instead of that, you may use any other css selector like class, tag name or any other indirect selectors.

Is Center deprecated?

The CENTER element is deprecated because basically a it's a purely presentational tag rather than structural and is similar to shorthand for 'DIV align=center' which is better handled via CSS.

How do you center without a center tag?

Buttons are normally, by default, inline elements. So either you center them with text-align: center; , either you give them display: block; along with margin: auto; . You can also simply wrap them in an element other than <center> - say, <div> - and center the contents of that div.


1 Answers

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.

like image 75
Niet the Dark Absol Avatar answered Sep 21 '22 17:09

Niet the Dark Absol