How to Correctly Center HTML Items using CSS and Avoid Non-Supported Methods – Basics of HTML #6

Today’s post is another in the The Basics of HTML for Beginners and Blogger Series, all about properly centering HTML items using CSS. There’s a number of ways to center items so here is an overview. I’ll try explain each methods as best I can, starting with the incorrect ways.

The incorrect ways to center items

Center tags and align attributes were used back in the day to centre items such as images, headers, navigation and text. However coding standards have since changed, styling should now only be done in CSS and not within the HTML. These two methods are no longer supported and haven’t been for some time, therefore shouldn’t be used in your code at all.

<center>centred item no longer supported</center>

and

<div align="center">no longer supported</div>

Despite being depreciated they are still used very frequently. I think the reason for this is because they do still kind of work. However they are no longer supported, meaning that although it may seem like it works in some browsers, it is not guaranteed to work as intended.

I have also noticed that they are often used incorrectly (example in this post) which doesn’t surprise me at all to be honest. Being frank, if someone is developing a site and using these methods that have been deprecated for years now, then they don’t know the basics of HTML or coding standards.

How to correctly Center items using CSS

There are so many ways of centering items using CSS, the recommended supported ways! Not every technique works with every element, which is where a lot of people get confused. Below I explain the many ways to centre different elements.

1. How to centre text in HTML

The easiest way to centre text, paragraphs, headings, etc is by using text alignment. This centres the text within the container. To centre every paragraph that’s written in HTML like

<p>This text is centered.</p>

we can simple use the following in our CSS

p { text-align: center; }

but if we only want to centre certain paragraphs we can add a class and define it. In that case our HTML would be

<p class="centeritem">This text is centered.</p>

and the CSS would be

p.centeritem { text-align: center; }

2. HOW TO CENTRE BLOCK ELEMENTS IN HTML

Blocks are elements that have a defined width, so you have to use a width value for this. We set the margins to auto so that both the right and left sides are equal. If our HTML for a box with text looked like

<div class="centeritem">This block is centered, but the text inside it is left aligned.</div>

We would centre the box by using

div.centeritem { margin-left: auto; margin-right: auto; width: 100px; }

3. HOW TO CENTRE IMAGES IN HTML

Centering images can be a little more difficult which is why most people wrap them in centre tags. The best way is to tell the browser that they are block elements and then centre it similarly to above. So if our HTML was

<img src="imagename.jpg" alt="image" class="centeritem" />

we can use the following in the CSS

img.centeritem { display: block; margin-left: auto; margin-right: auto; }

4. HOW TO CENTRE ELEMENTS USING DIV IDs

The HTML would be written like so

<div id="centreditem"> Thing you want centred </div>

and the CSS would be the following

#centreditem {width: 100px; margin: 0 auto;} 

For more information on centering items with CSS visit this post by Design Shack.

12 Comments

  1. Great Information! I had no idea the first set of HTML was no longer supported…thanks so much for being willing to share your knowledge.

  2. Great tutorial! Very thorough.

    I don’t center many things these days, but when I do I have to quell my first instinct, which is to type in center tags. 🙂

  3. Hi! So, I’m currently designing this little site for when I leave for my mission in Thailand, and I’m hoping you can help me out. The links in my navigations won’t center vertically, I’m not sure how to fix that. Thank you so much!

    1. Hello! The spaces between each letter seem to be the issue, remove them and instead add .tabs-inner .widget li a {letter-spacing: 4px;}. You should also remove the center tags wraps around the list.

  4. I love you blog, I stumbled upon it a couple days ago and I couldn’t be more happier. I love the design of your blog and your content is so helpful, it has helped me to improve my blog (which I designed and developed myself) by adding a few tweaks and add-ons. The only problem I have is the drop down menus which really frustrates me because i don’t know what I am doing wrong.
    You’ve also inspired to me go University to study Creative Digital Media or something to do with Web Design and Web Development because I want to design and develop websites 🙂 xx

    Tashika Bailey
    http://officialtashika.blogspot.co.uk/

  5. Great! Thanks!

    Quick question of a beginner!
    Where exactly will I place the CSS code? I just placed it at the end of the style.css and it seems to have worked but I am sure I was just lucky.
    Thanks,
    Antonia

  6. Hi, I was searching about HTML formating for text and images on google and came across your site. Seems you guys are experienced website developer. This article was very handy for me. Thanks for the informative share.

  7. Just want to thank you for this page. It helped me solve a relatively simple centering issue that had me previously going down a rabbit hole with functions.php. Had I found your site earlier, it would have saved me a few hours!

Sorry, comments are closed!