The Way You’re Centering Text is Wrong

Photo of Ashley
Posted by
Coding
Using to center text and images is wrong (and what to use instead).

Let’s talk about something that’s so incredibly dead, and yet tons of people are still using it.

<center>

You might use it like this:

<center>Please center this bit of text.</center>

Oh my god, this little bit of code needs to die.

<center> is deprecated in HTML5

It was actually deprecated in HTML 4.0.1. We’re now up to HTML 5.

But the point is, the <center> tag is deprecated. You know what that means? It means the <center> tag is marked for death. It will still work, but it’s unsupported. There’s a huge red warning that says FOR THE LOVE OF GOD, STOP USING ME.

But I guess the problem is that it’s deprecated—not deleted. Deprecated means it’s basically marked for deletion, but hasn’t been deleted yet. So the code will still work until it does get deleted, but since it still works, people still use it. They don’t know it’s wrong.

Proper coding separates structure and content (HTML) from styling (CSS).

In the old days, there was a super blurry line between structure and styling. They were basically intertwined. You could write code like this:

<p align="center" font-family="Arial">My text</p>

The style (or presentation) was mixed in with the structure. Nowadays, that’s a bad thing. We try to separate the structure from the style by dividing HTML and CSS.

Content and structure goes in HTML.

  • When you need a new paragraph, you add paragraph tags.
  • When you want to insert an image, you add image tags.
  • When you want to create a new section of content, you add div tags (or section tags or whatevs).

When you want to change how that structure looks (like center some text), you don’t use HTML. You use CSS.

That, my friends, is how things are done these days.

So how do you center content?

  1. Add a class to your HTML (like “text-center”).
  2. Style that class in CSS.

So let’s say you have this:

<p>My text here.</p>

You’d add a class like this:

<p class="text-center">My text here.</p>

It doesn’t really matter what class name you choose. It should be kind of descriptive though.

Then, add some custom CSS to your site (if you’re on WordPress you can use the Simple Custom CSS plugin) to style that class, like so:

.text-center {
    text-align: center;
}

This CSS says, “Hey, biatch! Find all places where we use the ‘text-center’ class and center the shit inside.”

The goal is to separate your content/markup from your styling. Don’t mix the two! <center> may still work now, but since it’s been deprecated, you should expect it to stop working at some point.

Fess up. Do you use the <center> tag?

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

39 comments

  1. I will admit that, yes, I still use center tags. For one, it is quicker than adding typing out a style if all you’re doing is adding center. If you’re doing a bunch of other styling, then I’m better about it. I’ve also used it when I build emails. Building email is a bit of a different beast than building websites. I’ve had css not work, but the center work. Why? I have no idea. But if I’ve been working on an email for two hours and it now works, I quit questioning and call it golden. I will say that I will start to be better going forward.

    Question, will this be the same with , and other markup styling tags?

    Melanie Simmons @mlsimmons recently posted: Croc’s Return Audiobook by Eve Langlais (REVIEW)

    1. It’s not quicker if you change the class name to be something shorter. 🙂 For example, you could use the class name “c”. That would give you the same number of characters either way.

      <p class="c">Centered text</p>

      Email runs on outdated technology that’s much older than a typical webpage. Email templates are basically still built using tables (and you’d be butchered alive if you were caught doing that on a webpage today 😛 ).

      <em> and <strong> should be used when you actually want to emphasize text. So if you’re reading your text out loud and your voices changes to emphasize a word or phrase, then you should use <em> or <strong> as appropriate.

      If you want to change something purely for stylistic reasons but not have it read any differently, then it should be styled with CSS instead.

    1. Well you’re certainly not the only one. But now you can start doing it correctly in the future. 🙂

  8. This is exactly why I am doing your e courses (I loved your post on those and I know for a fact I’m an e-course kinda girl). I use the hell out of because css intimidates the crap out of me. I’ve gotten pretty good at html, but seriously that only gets basics done nowadays. I want to be able to create my own beautiful static and I cannot do it without css (or hiring you) so I cannot wait to get started next month with your course. I’m also super excited to get Tweak Me switched over too! Thanks for this post.

    Ashley R recently posted: Extreme Home Circuit Training #1

    1. I was so psyched when I saw that you signed up for the course! I think it’s perfect for you! By the end you’ll definitely have an awesome understanding of how CSS actually works and what all the parts mean. I remember when I first started out and all the hashes and brackets just freaked me out.

  9. Sorry for typos. I meant use the hell out of center (it won’t let me type that with the tag around it). And Create a static homepage. 🙂

        1. If you always want galleries to be centered then the ideal thing to do is to modify that permanently in the CSS.

          If you’re not familiar with how to do that then you should use the same method I described above—though maybe using <div> tags instead of <p>. tags. Like this:

          <div class="text-center">
<!-- gallery code here -->
</div>

          And with the CSS added to your custom CSS area.

  12. Guilty. I didn’t realize it had been changed over. I use the css in ebooks, but I’ve always used just the center tags on websites. Thanks for the heads up.

  13. Ahhh thanks for this post, I was amazed at the amount of people (even developers) using it in their work, or in tutorials…

  15. Pingback: Weekly Wrap Up (95) | Bye Bye January • LilybloombooksLilybloombooks

  17. Yes – I am of course using the antiquated tag and just implemented your new method on my Monday post (I already had the Simple CSS plug-in). It was super easy and worked like a charm – thank you!

  18. Oh my god, I loved your post! Although it’s kind of the sad truth, it was so funny to read haha. Thank you!

  20. Any idea what us bloggers on Blogspot should do?
    Because with Blogspot sites, when you write the post, it only gives you the option of doing just the HTML – no CSS.
    Would we edit the Blogspot template with the CSS and then use the class container in the HTML? Would that still work?
    I dunno if that makes sense to you ^ Let me know if I’m being too vague! :/

    Geraldine @ Corralling Books recently posted: The Distance from A to Z by Natalie Blitt | An Alright Contemporary

    1. Yes, you put the CSS code directly into the template. Or I think there’s an area in the template settings to enter custom CSS into a box.

      Either way, the CSS is something you do on a global/template level — not in each individual post.

      Hope that helps. 🙂

  21. I will concede that, yes, regardless I utilize focus labels. For one, it is faster than including writing out a style if whatever you’re doing is including focus. In case you’re doing a cluster of other styling, then I’m better about it. I’ve likewise utilized it when I construct messages. Building email is somewhat of an alternate brute than building sites. I’ve had css not work, but rather the middle work. Why? I have no clue. In any case, on the off chance that I’ve been chipping away at an email for two hours and it now works, I quit addressing and call it brilliant. I will say that I will begin to be better going ahead.

    Annabel recently posted: Common Bank Interview Questions with Answers

    1. The CSS is a one-time thing you put on your site. After you add it once, you don’t have to add it again.

      Emails use a much older standard for HTML and thus have different rules.

  23. Pingback: Weekly Wrap Up (95) | Bye Bye January • Vivacious Bibliophile

Recent Posts

    Random Posts