html - 複数の画像をテキストの中央に配置する

Question

次のようなテキストの中心に画像を配置するのに少し苦労しました。

テーブルを使用していくつかの試みを行いましたが、画像を中央に配置できません。

Answer 1

ここで JSFIDDLE の例を作成しました:デモ

テキストが常に中央にくるように、背景にパディングを使用できます。また、セットして使用することdisplay: block;もinline-block;できますmargins, padding。

<div class="wrapper">
    <div class="color">
        <h1>Some big text</h1>
        <p>Some small text</p>
    </div>
</div>

.color{
    // background-color: red; <-- used in the jsfiddle
    background-image: url('yourimage.jpg');
    display: inline-block;
    text-align: center;
    padding: 40px;
    color: #fff;
}

h1{
    font-size: 80px
}

Answer 2

<div id="bannerinfo" style="color: white; width: 100%; height: 40px; background-color:#9fd2cd; text-align:center; line-height:40px;">
                       <p>Sale Now On - Click here to find out more</p></a>
</div>

これで試して

Answer 3

画像の display プロパティを block / inline-block に設定すると、通常のオブジェクトのように使用できるため、margin や padding を設定できます。中央に配置したい場合は、そのまま使用できますdisplay: block; margin: 0 auto;