html - 图像下的左对齐文本，最大宽度为 :100%

Question

我希望这张图片下的文字在图片下方左对齐(“我的标题”与图片的左侧对齐)，无论它的高度是多少，没有 Javascript.

HTML

<div class="container">
    <div class="img-container">
        <img src="http://img.thesun.co.uk/multimedia/archive/01572/empire-state-build_1572000a.jpg"/>

        <div class="info">
            <h1>my title</h1>
            <p> my description</p>
        </div>

    </div>
</div>

CSS

.container{
    width:900px;
    position:relative;
}

.img-container{
    text-align:center;
}

img{
    max-width:100%;
}

.info{
    text-align:left;
}

http://jsfiddle.net/NGwdc/

如果您调整 .container 宽度，它应始终与该图像的左侧对齐。

仅使用 CSS 是否可行？

Answer 1

答案是让图片容器display:inline-block，最外面的容器text-align:center

http://jsfiddle.net/NGwdc/1/