1. Computing

Discuss in my forum

Jennifer Kyrnin

Poll: Do you center elements with CSS?

By January 24, 2013

Follow me on:

It used to be if I asked this question, I would get mostly “no” answers. Everyone used the (now deprecated) CENTER tag. I had to spend a lot of time convincing people to use CSS instead of deprecated tags like CENTER, but now CSS has gained more popularity. But are there still people out there who use the CENTER element? If you do, is there any particular reason? Is it just easier?

Comments
January 24, 2013 at 2:11 pm
(1) Marie says:

Sometimes CSS doesn’t work—for example in some email clients when composing emails. People are still using older browsers too. The center tag is one of the last to go.

January 29, 2013 at 12:20 pm
(2) Stinger51 says:

Centering with CSS does not work uniformly across browsers, including IE9, the latest Firefox and Chrome. It’s nothing but a pain in the rear and you end up going back to the center tag for a quick fix.

If anybody says otherwise, prove it here with your HTML instructions. I’ve tried them all. That goes for centering everything from a paragraph to an image to a table. (And yes, tables are still a perfectly good design tool when used properly, contrary to what many CSS freaks say.)

Rather than spends hours on convoluted CSS hacks, the center tag is still best when the hacks don’t work. Sorry, but this is one presentation tag that cannot be separated from content — not until all major browser makers agree on the CSS rules.

January 29, 2013 at 4:02 pm
(3) Jennifer Kyrnin says:

@Stinger51 what happens when you center with CSS that you’re objecting to? Can you show a page that we can view in the browsers you name so that we can see the problems you’re alluding to? I haven’t had problems centering with CSS and having said centering work in all the browsers you named, but I may not be looking at the same thing that you are. Thanks!

Here is my example page for centering with CSS. The items are centered within the body text column (I don’t control the About.com layout), except the last item which demonstrates some text centered vertically within a box. When I look at that page in Chrome, Firefox, and Safari, they seem to be positioned the same to me. What am I missing? (I have to turn on my Windows machine to check IE9…)

February 2, 2013 at 10:32 pm
(4) Stinger51 says:

@Jennifer: Here is the hack that I use to center a table in Internet Explorer using inline styling (brackets used to preserve formatting):

[div style="text-align: center;"]
[table . . . ]

This does not work, however, with Chrome or Firefox (or I can’t get it to do so). So, I have to revert to the center tag when centering tables, which still works across all browsers. I have also tried different hacks with spacing and margins, etc. And sometimes they work. And sometimes they don’t (depends upon the browser).

I will read more about your method and let you know how it works across browsers. I know this is a complicated subject when it comes to centering tables with CSS. But I have way too many tables scattered across different web sites to go back and turn them all into pure CSS positioning, which could be a nightmare all by itself.

February 3, 2013 at 11:57 am
(5) Jennifer Kyrnin says:

@Stinger51: That doesn’t work because tables are not inline objects – and text-align only affects inline objects, specifically text. Images are the only exception. To center a table inside a div you have to use margin-left:auto; margin-right: auto; and set the width of the table as less than the width of the div.

If you want to center the text INSIDE the table, you need to put the text-align: center; on the table, not on the div.

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.