Websites for sale:
Used Cars for Sale - $175 and Car Sale.
If interested drop me a line at ken@kensfi.com. Thanks!

Have questions about Toronto? Check my latest project: Ask about Toronto!

How to align center a DIV with no width declared

Posted on May 11, 2010

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:

<div>
    <span>
        <ul>
            <a href="#"><li>About Us</li></a>
            <a href="#"><li>Copyright</li></a>
            <a href="#"><li>Partners</li></a>
            <a href="#"><li>Products</li></a>
        </ul>
    </span>
</div>

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:

<div>
    <span>
        <ul>
              <li>Here is the centered Title!</li>
        </ul>
    </span>
</div>

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:

<div>
    <span>
        <ul>
            <li><img src="http://www.kensfi.com/images/pict.jpg" width="200" height="166" />
            </li>
        </ul>
    </span>
</div>

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.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Related Posts

CSS

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.

Please read before commenting:

I don't tolerate spam comments. Be human and polite. If you are signing as "Computer repairing", "iPhone store" or other kind of bullshits you'll be marked as spam.
USE YOUR NAME! Thanks!

Comments

4 Responses to “How to align center a DIV with no width declared”

Leave Comment

(required)

(required)