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

Posted by NXTBoy on Stack Overflow See other posts from Stack Overflow or by NXTBoy
Published on 2010-06-12T21:15:42Z Indexed on 2010/06/12 21:22 UTC
Read the original article Hit count: 196

Filed under:
|

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?

© Stack Overflow or respective owner

Related posts about html

Related posts about css