0

この画像の下のテキストは、 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だけで可能ですか？

4

1 に答える 1

0

答えは、イメージ コンテナーを作成し、display:inline-block最も外側のコンテナーを作成することです。text-align:center

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

于 2013-01-30T01:32:32.920 に答える