CODEWITHSUNDEEP
htmlcss
NXTBoy
NXTBoy

Reputation: 353

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

I have this html:

<div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
</div>

Which is accompanied with this CSS:

.object-box .caption, .object-box img {
    display: block;
}
.object-box {
    border: 1px solid;
}

I would like the surrounding div to shrink-wrap to its contents. I can achieve this by using float: ... or display: inline-block. However, I'd also like it to be centered on the page, using margin: auto. The two approaches don't seem to be compatible.

Is it possible to create such a shrink-wrapped, centered container, without adding a wrapper element?

EDIT:

jsFiddle here

Upvotes: 25

Views: 13463

Answers (7)

mpr
mpr

Reputation: 3378

CSS now has something called the flex layout and in my limited use so far it's worked very well.

https://www.w3.org/TR/css-flexbox-1/

Try something along these lines:

<html>
<head>
<style>
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-box {
    border: 1px solid;
}
</style>
</head>
<body>
  <div class="object-box">
    <img ... />
    <span class="caption">This is the caption</span>
  </div>
</body>
</html>

Upvotes: 1

Jonas
Jonas

Reputation: 1

something along this should work

HTML:

<msgbox>
    <p>
        foo
    </p>
</msgbox>

and CSS:

msgbox {
    width: 100%;
    display: block;
    text-align: center;
}
p {
    display: inline-block;
}

... only sad thing is, the msgbox element, when using position absolute, blocks clicking through it (but that is only a related problem, and might not be one for you)

Upvotes: 0

Summer
Summer

Reputation: 2498

Just chiming in many months later. Centering a div of unknown width is a common problem, so you might want to create a re-usable solution.

HTML that wraps a div of unknown width that you'd like to center:

<div class="centered-block-outer">
 <div class="centered-block-middle">
  <div class="centered-block-inner">

   <!-- div that you'd like to center goes here -->

  </div>
 </div>
</div>

CSS:

 /* To center a block-level element of unknown width */
 .centered-block-outer { 
   overflow: hidden;
   position: relative;/* ie7 needs position:relative here*/
 }
.centered-block-middle {
  float: left;
  position:relative;
  left:50%;
}
.centered-block-inner {
  position:relative;
  left:-50%;
}

The reason why this works is explained here: http://www.tightcss.com/centering/center_variable_width.htm

The annoying part is that you have to create THREE divs to get this to work - css really ought to provide a better way. But the good part is this solution works across browsers and across your site.

Good luck!

Upvotes: 17

PlagueEditor
PlagueEditor

Reputation: 429

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>

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186562

<!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"><br>
        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">
        </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.

Upvotes: 20

edl
edl

Reputation: 3214

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

Upvotes: -1

Michael
Michael

Reputation: 11

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 :)

Upvotes: -3

Related Questions