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

html css

13,278

Solution 1

<!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.

Solution 2

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!

Solution 3

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>

Solution 4

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>

View more solutions

13,278

NXTBoy

Updated on April 24, 2022

Comments

NXTBoy about 2 years
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
- Nick Craver almost 14 years
  
  That something that should be so simple to do isn't painfully obvious is a testament to exactly how badly CSS is broken. That's not a rant against you NXT, this is entirely the CSS spec's fault, along with those who wrote it. display: center;, position: center, something should be a built-in, single-property option here.
- NXTBoy almost 14 years
  
  Is that code for "no, it's not possible"?
- Nick Craver almost 14 years
  
  Not at all, take a look here: haslayout.net/css-tuts/Horizontal-Centering It just shouldn't be that complicated, this is a very common operation, it should be easy.
NXTBoy almost 14 years

I can't afford to put text-align:center on the body element.
NXTBoy almost 14 years

I could do it with an extra wrapper div.
meder omuraliev almost 14 years

note: didnt test in IE8. let me know if it doesnt work though.
edl almost 14 years

I thought you wanted it without a wrapper?
PlagueEditor almost 14 years

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.
Luca Borrione over 11 years

+1 : please have a look at my answer for a proposal to complete your answer. It would be nice to hear what you think about it. Cheers
chim over 11 years

works for me, but had to change overflow: hidden to overflow: visible
Calmarius about 10 years

Works in IE9⁣⁣⁣⁣⁣⁣⁣⁣.