Equivalent to <center> tag in CSS?

text-align should work for other kinds of elements. Does this work?

.center { margin: auto; text-align: center; }

Edit Three Years Later :-D

margin: auto; also makes the top and bottom margins "auto". That might not be what you want. Alternatively you could have something like:

.center {
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: center;
  display: flex;
  justify-content: center;
}

This particular example will center the text horizontally while hardwiring the upper and lower margins to 3 pixels.

One can also say something like margin: 3px auto 3px auto; but I prefer spelling out the directions explicitly, as I can never quite remember what the order of the parameters are if I put them all on the one margin: setting.


There is a difference:

<center>
  <span>Works</span>
</center>

<span style="margin: auto; text-align: center;"> And this is broken</span>

<div style="margin: auto; text-align: center;">But this works works</div>

Tags:

Html

Css

Center