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!

回答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.

回答2:

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>

回答3:

to center elements i use this:

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

works for every/any element. works for me.

回答4:

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.

回答5:

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;

回答6:

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

回答7:

text-align: center is the equivalent CSS

回答8:

this is PHP-STORM offer: use this:

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

回答9:

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

来源：https://stackoverflow.com/questions/11478067/replacement-for-center