[CSS] divを画像サイズに合わせて囲む

画像を囲むDivがイメージに合わせてサイズが調整されるようにしたい場合に使用することができます。 このように、外部のdivが内側のイメージに合わせて囲むようにするには、 display：inline-block을 text-align：centerを一緒に使用する必要があります。

次のようなコードを使用することができます。

HTMLコード：

<div class="imageContainer">
<div>
<img src=".." />
<span>...caption...</span>
</div>
</div>

CSSコード：

.imageContainer {
text-align: center;
}
.imageContainer img {
display: block;
}
.imageContainer div {
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
}
.imageContainer span {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: #000;
background: rgba(0,0,0,.5);
}
// Source: stackoverflow

jsfiddleで、実際の動作を確認することができます。

divが二つ使用を置く、すぐ内側のdivが画像のサイズに合わせて調整されます。