ansaurus

Question

How can I center a box of unknown width in CSS?

Answer 1

A:

A div tag didn't seem to work; however, a span tag shrinked to fit. Hopefully the code explains itself. I added a few alignments as well.

<html>
    <head>
        <title>TEST!</title>
        <style type="text/css"> 
            .object-box-wrapper{width:100%;text-align:center;}
            .object-box {
                border: 1px solid;
                text-align:left;
            }
        </style>
    </head>
    <body>
        <div class="object-box-wrapper">
            <span class="object-box">
                <span class="caption">This is the caption</span>
            </span>
        </div>
    </body>
</html>

PlagueEditor 2010-06-12 21:42:41

I can't afford to put `text-align:center` on the body element.

NXTBoy 2010-06-12 21:47:48

That does pose a bit of a problem; but with a "wrapper", it could be done; otherwise I don't see a way. Sorry. I've edited my post to show a possible wrapper solution.

PlagueEditor 2010-06-12 23:34:34

Answer 2

A:

I had to do this for a jQuery photo gallery... What I ended up doing was when a photo was selected, the current photo would fade out and the new picture would be loaded, then calculate the difference of the width of half the container minus half the width of the photo. I would then set margin-left (and margin-top vertically) with that value.

    thewidth = $('#thephoto').width();
    theheight = $('#thephoto').height();
    $('#thephoto').css("margin-top",250-(theheight/2));
    $('#thephoto').css("margin-left",287.5-(thewidth/2));
    $('#thephoto').fadeIn(300);

This is where my Flash background really came in handy :)

Michael 2010-06-12 21:49:33

Answer 3

A:

The only way I know of to do it without javascript would be to set your div to position:absolute and left:50%.

edl 2010-06-12 21:51:37

I could do it with an extra wrapper div.

NXTBoy 2010-06-12 21:59:09

I thought you wanted it without a wrapper?

edl 2010-06-12 22:05:32

Answer 4

+1 A:

<!doctype html>
<html>
    <head>
    <title>ugh</title>
    <style>
        div#not-floated {
        display:table;
        margin:0 auto;
        }

        div#floated {
        float:right;
        position:relative;
        right:50%;
        }

        div#floated-inner {
        float:left;
        position:relative;
        left:50%;
        }

    </style>
    <!--[if lt IE 8]>
        <style type="text/css">

            #container { text-align: center; }
                #container * { text-align: left; }
                div#not-floated {
                    zoom: 1;
                    display: inline;
                }
        </style>
    <![endif]-->

    </head>

    <body>


    <div id="container">
        <div id="not-floated">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"&gt;&lt;br&gt;
        ok.
        </div>
    </div>
    <div id="floated-container">
        <div id="floated"><div id="floated-inner">
        <img src="http://www.google.co.uk/logos/d4g_worldcup10_uk-hp.jpg"&gt;
        </div></div>
    </div>

    </body>

</html>

Simple explanation is.. display:table; causes it to shrinkwrap in modern browsers, thats the only way to center widthless block level in modern browsers with margin:0 auto;.

In IE it's a matter of using parent element to set text-align:center on your shrinkwrapped display:inline block level element.

For floats its just 50% math using containers for IE.

meder 2010-06-12 21:59:22

note: didnt test in IE8. let me know if it doesnt work though.

meder 2010-06-12 22:04:57

ansaurus

tags:

views:

answers:

How can I center a box of unknown width in CSS?

EDIT:

related questions