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.