How to align center a DIV with no width declared

Wondering how is possible centering horizontally a DIV which has no width? Sure thing I couldn’t find any working method out there on the web today but I’ve got an idea in my mind and guess what? It’s working!

I’d been working today on a page where the menu wasn’t centered as I wanted to be and we all know how ugly is to add width on a navigation div (to make it centered) since the menu can change anytime and you can get some nasty stuff on the page if is fixed width.

The reason you can’t make a DIV to appear centered on a page is because a div by default has display:block; If you apply float:left; the DIV is becoming inline but obvious it can’t be central since you make it float left, isn’t? Don’t even think about making this DIV inline (display:inline;) as is not making any difference in our case.

The solution is pretty simple (holly cow, it took me an hour to figure it out!). All you have to do is to wrap that div (in the first case an unordered list) inside a span, span being an inline element. We will use ul and li also.

Now you’ll say, block-elements (DIVs, ul) are not allowed inside inline-elements (SPAN is an inline element) which is perfectly true. Well, is somehow against the rules, Eric Meyer will hate you, but when you’ll see the work done you will wanna dance!

Even more, the second example is based on multiple nested spans into DIVs, ugly somehow but as I said is doing the job so let’s forget for now about valid markup (Errors found while checking this document as XHTML 1.0 Transitional!).

HTML:

CSS:

ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}

Working in any browser!

You would think that margin:0 auto; would do the job in centering your div like always but as you see it isn’t (you can give it a try but it won’t!). Instead text-align:center; (sounds odd I know) is doing the trick.

To align let’s say, just a title you will do like this. Sure thing you can align center any HTML element you want, with specifying the width of the element you want centered. You won’t believe how simple is:

HTML:

  • Here is the centered Title!

CSS:

ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}

Working in any browser!

To align a picture you follow the same method:

HTML:

CSS:

ul {text-align: center;}
li {display:inline; padding:0 10px 0 0}
span {text-align: center;}

Working in any browser!

Whaaaat? Is that all?? It couldn’t be that simple! Hell yeah, is that simple! :) From now you can align center any HTML element you want without being necessarily to specify the width of that element.

Here is the DEMO.
To test this page in any browser, here a good tool.

Final solution and using valid (X)HTML this time, using center HTML tag instead of span, the method Sonix suggested in one of the comments:








Working in any browser!(Tested IE6, FF4, Chrome) Valid CSS & HTML

Tags : , , , , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

9 Comments

Leave Comment