У меня есть этот html:
<div class="object-box">
<img ... />
<span class="caption">This is the caption</span>
</div>
Что сопровождается этим CSS:
.object-box .caption, .object-box img {
display: block;
}
.object-box {
border: 1px solid;
}
Я хотел бы, чтобы окружающий div сжимался до содержимого. Я могу достичь этого, используя float: ...
или display: inline-block
. Тем не менее, мне также хотелось бы, чтобы это было сосредоточено на странице, используя margin: auto
. Эти два подхода не кажутся совместимыми.
Можно ли создать такой контейнер с центрированным контуром, без добавления элемента оболочки?
EDIT:
jsFiddle здесь