The
<center>tag is awesome. Why have I been avoiding it all these years?
Seriously. It is. But I feel like I may have to defend my opinion on this one!
[](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)
It’s easier[](#its-easier)
I want to centre some text. My brain has a fork in it’s process:
-
I use
<center> -
I don’t use
<center>and choose from an array of CSS based options
Let’s entertain option 2 for a moment. Here’s my code:
<p>The witch had a cat and a very tall hat,</p>
<p>And long ginger hair which she wore in a plait.</p>
<p>By: Julia Donaldson and Axel Sheffler</p>I want the author credit to be centre aligned. This is the cost with option 2:
-
Add a class to the last
ptag -
Think of an appropriate name, perhaps "credit"
-
Create a new style sheet file
-
Add the
linktag to theheadof my document -
Remember to add
rel="stylesheet"or it won’t work -
Add 3 lines of CSS
As such:
.credit {
text-align: center;
}Not much work.
Now compared to using the center tag:
-
Add
centertag around content -
No, there is no step two. Got you there for a second, right?
But…but…semantics\
Okay. Semantics. Let’s keep the deeper conversation aside for a minute, but what I’ve seen argued is: the center element doesn’t have any semantic value.
So instead you might use a span or a div instead (and yes, sure, if you were just centring a paragraph, you’d use a p and CSS as above).
But now you’re using an element without any semantic meaning, and then adding CSS (and probably classes) to centre align.
Instead, why not, use center, which has "no semantic meaning" and benefit from the default browser styling that you get for free. Just like you do for different heading levels. Or for sup or small?
Yeah, but it’s deprecated\
Actually, according to the W3C validator, the element is obsolete - which sounds a little harsher.
But then, so what? The beauty of HTML is that it works, as busted as you can make it, browsers will make it work.
Old pages written with font tags and big still work, and there’s a [well defined spec](http://www.w3.org/TR/CSS2/sample.html) for browser vendors that support HTML4 as to how HTML4 elements should be styled. HTML4 moved to recommendation in 1999, and HTML5 has still not reached recommendation phase (at time of writing it’s Candidate Recommendation as of 31 July 2014).
My point being: browsers will support the HTML4 elements for a long…long time. I’d be prepared to bet that HTML4, and center styling will be supported beyond the lifetime of this blog (and any other of my sites).
So it’s deprecated. But it works. And that’s basically the web summed up: but it works.
More center?[](#more-center)
Yep, I’ve convinced myself, I’ll be using center just a little more often (than previously not at all). Maybe you’ll reconsider pulling it back in to your toolbox!
Published 15-Aug 2014 under #code & #html & #html5 & #troll. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/in-the-middle-with-center.md)
Comments
Lock Thread
I believe that the main advantage of "center" tag is that it centers both text-level and block-level content, which can’t easily be done with CSS. But the implementation of "center" relies on browser-specific hacks (Gecko and WebKit/Blink use non-standard prefixed values of text-align for it) and, AFAIK, there is no standard CSS way to express this behavior yet. The fact that HTML4 has been there for years doesn’t guarrantee that all its features are supported and will be supported forever (e.g. HTML4 charoff attribute has never been supported). HTML5 has already reached PR, all browsers currently use HTML5 parser by default, and (AFAIK) HTML5 standard for browsers says that browser should recognize "center", but doesn’t say anything about its styling. Browsers have already dropped support for "blink" tag and changed the default behavior of parseInt() for numeric strings with leading zero, so backwards compatibility principle is not so unshakeable now. I think that "center" tag may be OK for quick prototyping, but not for production.
laith
0 points
9 years ago
hi how to creat marquee for multiple line ??
?
Anonymous
0 points
9 years ago
Don’t try this at home.
Here you have the industry standard.
Bootstrap\
<p class="text-center">…</p>
Foundation\
<p class="text-center">…</p>
Gumby\
<p class="text-center">…</p>
Base\
<p class="text-center">…</p>
Inuit\
<p class="text-center">…</p>
Amazium\
<p class="text-center">…</p>
Nice joke though.
Ricardo Castañeda
0 points
9 years ago
Those standards are fine and an are a fast and easy solution if you don’t have to refactor multiple html documents. The problem is that a developer can not predict the final styling of the design. During development a change of styling can occur at any time an arbitrary number of times. And multiple pages can have multiple templates making maintenance a serious time consumer. Consider that the design of a website can change the next year and that the team can also change.
Following those standards, what if the p with author content needs to have another styling not provided by the '.text-center'. Then you’ll be forced to add another attribute or another class name. The semantic approach is more solid because can have styling very specific and can help to attach necessary JavaScript events.
With a css compiler like Sass or Less you can do something like:\ .author {\ .your-classname; /\* .text-center according example \*/\ }
rem
0 points
9 years ago
class="text-center" - isn’t that the joke?!
?
Anonymous
0 points
9 years ago
\> If this was a genuine post, then this is a genuine question: why is better than style="text-align: center;" (besides “less typing”)?
Probably because when using 'text-align: center' on non-text, it doesn’t feel that intuitive. 'style="align: centre"' sounds better.
I think the main rub here is that when you just want to write something, you don’t really want to get bogged down in mark-up, you just want to express yourself.
In reality I don’t visit many web sites/pages that have content and style totally decoupled. Not that it’s not a worthy aspiration. Many sites/pages don’t degrade gracefully (no Javascript). Bootstrap also encourages pseudo-table layouts. That feels a little murky and blurs the same line.
The in-line style neither feels better or worse to me for this.
?
Anonymous
0 points
9 years ago
I came here to make the same style attribute point as Dominykas. If you’re in quick and dirty mode then inline styles make the most sense, and you can add all the other tweaks you want, not just text alignment. And you don’t have to worry about the validators telling you off.
?
Anonymous
0 points
9 years ago
Chiming in with @Marc Drummond & @Damian Cugley and speaking as a frontend dev in a digital agency.
Loose coupling is a LOT better.
p.credit, p.author, footer or cite leaves you a lot more room to manoeuvre in the future compared to p.center, p.blue, etc.
By the way, there is also the <cite> element which defeats the purpose of the example anyway.\
<p>“The cite element represents a reference to a creative work.</p> <p>It must include the title of the work or the name of the author (person, people or organization) […]”</p> <cite>- Berjon et al. 2013</cite>
On a side note, I have been using simple element.class selectors (one element with a class that is a common english word) with great success.
Using a class or element on its' own with common english words leaves the danger of clashes.
?
Anonymous
0 points
9 years ago
If this was a genuine post, then this is a genuine question: why is <center> better than style="text-align: center;" (besides "less typing")?
?
Anonymous
0 points
9 years ago
Totally agree with @Matt Rose. Styling with CSS gives you better control, especially responsively. On a mobile-first site I love classes like .align-center—medium so you’re not forcing the centering to be in every context.
may work sometimes, but it’s like a gateway drug to other old tags that best remain retired.
?
Anonymous
0 points
9 years ago
And then version 2 of the site ends up with CSS like this:
center { /* author’s name */ text-align: left; font-variant: small-caps; }
It’s inevitable… :-)
Denis The Composer
0 points
8 years ago
LOL
?
Anonymous
0 points
9 years ago
If center is working for you, Remy, well, do what you like! It is your code, and for you, center has design semantics describing what you want to do, center the text.
I want to reply to Matt’s comment, though. I know there a lot of folks who think that having a class of "align-center" or "blue" or whatnot is fine and dandy. Yes, it’s reusable, and you can use that class wherever you like to achieve the specific effect you want.
But let’s not pretend that doing so has anything to do with separation of concerns. If you’re using a class of "align-center" then you’re explicitly tying the content with the presentation in the content layer. There’s pretty much no additional benefit you’re getting over the center element besides the fact that the center element has been retired.
In either case, if somebody decides no, actually, when I credit somebody I would not in fact like to have that text centered, I would instead prefer to have it right aligned and pink. Well, then if you are crediting people on fifty different pages or five hundred, you will need to go through each and every page to change that markup. Now if that markup is generated from a template, perhaps no big deal. But if that element or class is in a content field stored on a per page basis, that is not a fun day.
Of course you could change the definition of align-center to actually align things right and make them pink, but that seems weird.
So in most cases using a class like credit gives you a little more flexibility if you make a decision down the road. That’s why I prefer loose coupling.
Again, your mileage will vary. If you are putting a center element on one page of your site, and you’re certain that’s the appearance you want, then not a big problem if you change that at some future point. And if the markup is generated by a template, then again, not a big problem.
As always, your mileage will vary.
?
Anonymous
0 points
9 years ago
But what about pages with RTL text?
?
Anonymous
0 points
9 years ago
If you’re just trolling, please ignore this comment :P… but just in case…
I think you have an argument when you’re quickly hacking together some HTML, but it should be noted, this is not best practice.
HTML and CSS should be decoupled. HTML should be used to describe the content, and CSS should be used for styling. This allows for modularity and scalability. Your post has two examples that fail this.
First, you shouldn’t used a class named ".credit" as it would be describing the content, not the style. This makes is so your CSS isn’t modular/reusable. In this case, common practice would be to use a helper like ".align-center" or something. This means you can reuse it, no matter what the content is (even if it’s not a credit). This means in the future you can add it to an element as easily as adding \<center>.
Second, you used \<center>, which is describing the styling and not the content. As you noted, \<div> and \<span> don’t add much more semantically, but at least it’s keeping the styling and content decoupled.
I would suggest you don’t make this a common practice. I like breaking rules at times, but at least acknowledge the benefit of these rules and the fact that you’re breaking them.
This is a good read: [http://nicolasgallagher.com…;](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)