Lenak Lenak - 5 months ago 18
HTML Question

<center> tag deprecated - No perfect replace

I'm running a simple website with basic HTML5 and CSS. (No CMS or anything, just old-school webdesign like 20 years ago)

To make things pretty (and optimized for mobile devices) i often use the

<center>
tag to... well... make things centered.

Now I'm often reading that the tag is about to be abandoned. It still works (At least for Chrome and Firefox) but god knows how long it will still work.

Many forums and coding portals like W3Schools already posted an alternate solution using style variables or CSS.

New solution:
<div style="text-align:center">Random center text... Bla bla, Boohoo...</div>


Unfortunately, it doesn't work for my website...

Neither the method inline Style (
<div style="text-align:center">
) works nor does the CSS method works (
<style>#coolcenterdude{text-align:center}</style><div id="coolcenterdude">
) Even doing this with external CSS documents doesn't work. It's just like the object that i'm trying to center is ignoring the text-align parameter.

Any help out there?

<center>
still works fine, but i don't want my website get screwed when the tag is finally out of support.

Answer

from what I understand you are looking for a way to center the site, so you need to use margin:auto with a (max)-width

Something like this:

body {
  /* reset default body margins */
  margin: 0
}
#wrap {
  /* choose the value that fits you better - you can use another unit besides px */
  max-width: 300px;
  /* just for demo */
  height: 100vh;
  background: green;
  /* top-bottom :0 // left-right: auto */
  margin: 0 auto;
}
<div id="wrap"></div>