1

「display: inline-block;」を使用している 2 つの div を中央に配置しようとしています。しかし、私がしようとするたびに、うまくいきません。インラインブロッククラスを削除すると。中央に配置されますが、横ではなく下に表示されます。コードの例:

#news {
    background-image: url('../img/news.png');
    background-repeat: no-repeat;
    height: 152px;
    width: 320px;
    display: inline-block;
}
#conBody {
    background-image: url('../img/conBody.png');
    background-repeat: no-repeat;
    height: 260px;
    width: 321px;
    margin: 0px auto 0px auto;
    text-align: right;
    display: inline-block;
    padding: 0px;
}

HTML :

<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="news">

</div>
<div id="news">

</div>
<div id="news">

</div>

次のようになります。

プレビュー

4

3 に答える 3

0

各div を個別に中央に表示しようとするのではなく、すべてを div でラップして中央に表示する必要があります。

CSS を使用して、ブロック要素を中央に配置できます。

margin:0 auto;

これはベアボーンデモのフィドルです: http://jsfiddle.net/nRAyQ/3/

于 2013-08-06T17:58:39.093 に答える