Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Equivalent to <center> tag in CSS? [duplicate]

Tags:

html

css

center

I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS. text-align works for text but not other elements, and auto margins only work if you know the width of the container (so not a solution if you don't know the width in advance). So is there any real equivalent to this <center> tag?

like image 510
laurent Avatar asked Aug 29 '11 04:08

laurent


People also ask

What is the replacement of center tag?

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p> . For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto ).

What is replacement of center tag in HTML5?

The <center> tag in HTML is used to set the alignment of text into the center. This tag is not supported in HTML5. CSS's property is used to set the alignment of the element instead of the center tag in HTML5. Syntax: <center> Contents... </ center>

How do you center a tag in CSS?

Center Align Text To just center the text inside an element, use text-align: center; This text is centered.

Why center tag is 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.


1 Answers

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.

like image 105
Mike Crawford Avatar answered Nov 04 '22 23:11

Mike Crawford