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