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}
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}
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;}
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:
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.
Hmm but in most cases, there is more than one LI which would need a float:left declaration. If this is the case, it doesnt work as the float: left in the LI’s will force the list to the left of the page. So what if your trying to center a ul list that is, for example a menu that needs the float: left property for it’s LI’s?
AJa, why you need to float left the list items?
Well my friend, but why not use the good old ‘<center>’ to enclose the div?
Sonix, my dear old friend, how is it going? :)
From what I know, you can’t center a div with no width declared even when using align=”center”. The explanation is that the browser don’t know where to place it on the page since there is no width on your div. It fails basically to calculate the center of it.
If you have something in your mind drop it here and let’s see, maybe is working :)
Cheers! :)
Hi,
ul element cannot be inside span. So no HTML validation…
SoniX:
“The center element is deprecated.” – Thats why. By the way it wouldn’t work, for the reasons explained by Ken.
you’re right SoniX, the center HTML tag is doing the job. Less code, valid (X)HTML and a more elegant method. Thanks dude ;)
Who cares is deprecated?
I attached it to the original article just in case someone is looking for it :)
I have floated elements inside that div and your solution does not work. It just stays to the left.
“Who cares is deprecated?”
Browsers are not obligated to support deprecated tags, and eventually, they stop supporting them. That could take years, though, so maybe you’ll be lucky.
More importantly, deprecated tags can not only make your page load slowly, they can simply break your website for people coming to your site from diffferent browsers, different platforms, or different devices.
That’s why web standards are important – so that you can reliably provide a website that looks and acts the same for the largest possible audience. Using deprecated tags is like littering your backyard with minefields. Yes, it’s a big backyard and no one comes to visit you often, but why are you even taking the chance when you know that a mine could blow someone up?