tag displays differently vs text-align

Question

I've just discovered <center> is obsolete in HTML5, but it works fine in IE9 with <!DOCTYPE html>:

http://www.w3.org/TR/html5/obsolete.html#obsolete

The alternative is to use CSS text-align, but I get conflicting results:

<body>
  <table style="text-align:center">
    <tr>
      <th>Column</th>
    </tr>
    <tr>
      <td>Data</td>
    </tr>
  </table>
  <p style="text-align:center">Text</p>
</body>

Any suggestions on how to center both the table content and the p content within the page? (I can't see what's so bad with <center> anyway).

To centre the table you need to put it within another element and add `style="text-align:center;"` or give it a fixed width and apply `style="margin:0 auto;"` to the table element — Tim, Dec 17 '14 at 09:21
tags are block elements so will match the width of the containing element, is a strange element in that it acts like a block element but will always be the width of it's contents unless a width is specified [see this article on css-tricks](http://css-tricks.com/complete-guide-table-element/) — Tim, Dec 17 '14 at 09:30
What is the question? If you have some code that uses `` and you want to change it to use CSS instead, *say that* and *show your code*. (It sounds like a pointless exercise, but at least it would be an answerable question.) The effect of `` depends on its content (and also browser mode, maybe). — Jukka K. Korpela, Dec 17 '14 at 13:03

SW4 · Accepted Answer · 2014-12-17T13:33:17.280

I've just discovered is obsolete in HTML5 (...) I can't see what's so bad with (it) anyway

If it isnt in the spec, or is marked obsolete then how it is interpreted and whether it is supported becomes increasingly up to the vendor.

As of Oct 28th 2014 center appears under

Elements in the following list are entirely obsolete, and must not be used by authors

You may being using center now and it 'works', but in the next version of your browser, all support may be droppped, leaving you with a page that doesnt render as intended.

text-align:center will center your text, in exactly the same way. However any additional styling applied to the center element by browsers (each has a default set of CSS styles often derived from the w3c recommendation) will not be present.

The conflicting results you note arent due to the use of center vs text-align they are because the text is being aligned within elements of varying widths. If you set the width of your table to 100%, the alignments will be similar.

HTML5 describes the meaning of `center` in detail (actually, in more detail than any previous specification), so it’s unreasonable to scare people about support being dropped. It would cost time and money to vendors to remove support, and it would make *illions of pages stop working, so why would they do that? — Jukka K. Korpela, Dec 17 '14 at 13:01
A link/ref would be great if you have one- it may be easy to interpret `center` appearing under `Elements in the following list are entirely obsolete, and must not be used by authors` in http://www.w3.org/TR/html5/obsolete.html in this way :S — SW4, Dec 17 '14 at 13:29

tag displays differently vs text-align

1 Answers1