Replacement for

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!

possible duplicate of [HTML: Replacement for ](http://stackoverflow.com/questions/1926864/html-replacement-for-center) — Jukka K. Korpela, Jul 14 '12 at 04:22

score 38 · Accepted Answer · answered Jul 13 '12 at 20:43

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.

WolvDev · Answer 2 · 2012-07-13T21:10:14.397

It's not that easy to center elements without the center-tag.

For this you need to do a workaround that works even in IE6:

You need a div wrapper around the element you want to be centered and use text-align:center; width:100%. Inside this div you place another div and set margin to auto and text-align:left;

<div style="text-align:center; width:100%">
    <div style="margin:auto; text-align:left;">
        This Container is centered
    </div>
</div>

If you just want to center text you can use <p style="text-align:center;"></p>

This is the core. To simplify the thing, you can use a class for this (like Kolink wrote):

CSS:

.center {
    text-align:center;
    width:100%;
}
.center:first-child { //doesn't work in IE 6
    margin:auto;
    text-align:left;
}

HTML:

<div class="center">
    <div>
        This Container is centered
    </div>
</div>

score 3 · Answer 3 · answered Sep 01 '17 at 18:35

3

to center elements i use this:

.middlr {
   display: block;
   margin: auto;
}

works for every/any element. works for me.

answered Sep 01 '17 at 18:35

ryanwaite28

1,804
2
24
40

score 1 · Answer 4 · answered Jul 14 '12 at 18:11

1

The reason why <center> is deprecated is that it is not a semantic tag, rather presentational and we should steer clear of using anything in HTML that isn't semantic in nature.

It's the same reason that other presentational elements such as <b>, <i> etc have been deprecated, as there are ways of achieving the same in the CSS.

answered Jul 14 '12 at 18:11

Mat Richardson

3,576
4
31
56

6

This might be useful info, but it doesn't answer the question at all. – Maximillian Laumeister Sep 23 '15 at 21:27

score 1 · Answer 5 · answered Oct 07 '16 at 23:41

1

Replacement for center tag: (You should do both)

Use this style for parent element:

text-align:center;

Use this style for current element:

margin-left: auto; margin-right: auto;

answered Oct 07 '16 at 23:41

gnath

796
5
8

score 1 · Answer 6 · answered Jan 07 '17 at 03:36

1

.centered {
  margin-left: auto !important;
  margin-right: auto !important;
}
* > .centered {
  text-align: center !important;
  display: block;
}

answered Jan 07 '17 at 03:36

It's better to include some context/explanation with code as this makes the answer more useful for the OP and for future readers. – EJoshuaS - Stand with Ukraine Jan 07 '17 at 03:59

score 0 · Answer 7 · answered Sep 23 '15 at 19:22

0

this is PHP-STORM offer: use this:

<div style="text-align: center;"></div>

answered Sep 23 '15 at 19:22

javadroid

1,421
2
19
43

score -1 · Answer 8 · answered Jul 13 '12 at 20:43

-1

text-align: center is the equivalent CSS

answered Jul 13 '12 at 20:43

Cfreak

19,191
6
49
60

2

Nope. Try putting a block-level element in a `` and you see that the element itself is centered. – Niet the Dark Absol Jul 13 '12 at 20:44

score -1 · Answer 9 · answered Sep 15 '17 at 22:06

-1

I found this answer on a blog

<img src="bullswithhorns.jpg" alt="Michael with the bull" style="width:150px;height:200px;margin:0px auto;display:block">

Source

answered Sep 15 '17 at 22:06

l33tHax0r

1,384
1
15
31

Replacement for

9 Answers9

Linked