0

3つの画像を水平方向に中央揃えにしたいと思います。

.music {
width: 200px;
height: 200px;
background-image: url('image/music1.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.music2 {
width: 200px;
height: 200px;
background-image: url('image/music2.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.music3 {
width: 200px;
height: 200px;
background-image: url('image/music3.png');
margin: 0 auto;
display: inline-block;
cursor: pointer;
}

.main_content {
height: auto;
margin: auto;
width:100%;
background-color:#b0e0e6;
}

そして明らかなhtml

 <div class="main_content">
    <a href="documents.php"><div class="documents"></div></a>
    <a href="music"><div class="music"></div></a>
    <a href="photos"><div class="photos"></div></a>
</div>

css は、中央揃えではなく左側にすべてを保持します。私は何を間違っていますか？

4

2 に答える 2

2

margin: 0 auto幅が定義されたブロック レベルの要素のみを中央揃えにします ( <div>、<p>、またはインライン要素など - と<a>のようなdisplay: block)

inline-block1つまたは複数の要素を中央に配置する場合text-align: centerは、その親で使用する必要があります。

于 2013-10-02T11:39:05.780 に答える
0

クラス名が一致していないようです。現在、'music2' と 'music3' には適用される HTML 要素がありません。

「music2」と「music3」を「documents」と「photos」に変更すると、3 つの div すべてが水平方向に整列されます。

于 2013-10-02T11:44:59.497 に答える