De HTML 4 center tag is al wat jaartjes verouderd en wordt geadviseerd om niet meer te gebruiken.

We kennen deze voor al uit de jaren 90 waar we met <center></center> een blok konden centreren.
In moderne websites met HTML 5 die er ondertussen alweer vanaf 2008 is, is het gebruik hiervan afgeraden en editors zullen je foutmeldingen geven al lijkt deze tag nog wel te werken.
Als we op https://caniuse.com/?search=center kijken zie ik dat de center HTML tag in ieder geval nog door alle moderne browser wordt ondersteund al is de vraag wel voor hoe lang nog gezien dit HTML 4 markup is ipv HTML 5. Ook zal je website HTML validatie errors krijgen.

Maar noem mij nostalgisch ik vond dit nu net zo’n leuke tag en omdat ik vandaag niets beters te doen had schrijf ik dit artikel hoe je de center tag kunt blijven gebruiken.

Dit gaan we doen met hulp van VueJS en maken er een component van.
Ik heb een simpel project opgezet en start met de html markup.
Even niets spannends gewoon een titel en een tekst die gecentreerd wordt.

Zoals verwacht krijgen we hier een foutmelding maar de tekst wordt uiteindelijk wel gecentreerd.
Laten we dit nu oplossen door een center component hiervoor te maken als een slot.

Wat we hier nu natuurlijk doen is de center tag omzetten in een div die we met css centreren en dus conform moderne standaarden gebouwd. We geven dit component de naam center wat niet helemaal volgens de naamgevingsconventies voor VueJS is maar goed het werkt.

We kunnen het component nu globaal importeren als base component zodat we dit overal kunnen gebruiken. Helaas blijft VueJS dan nog een foutmelding geven wat irritant is. Laten we het daarom gewoon lokaal importeren.

Het is natuurlijk niet geheel de bedoeling de <center></center> tag te blijven gebruiken maar kijk het werkt.