css - 不能用 css 居中三个 div

Question

我想水平居中三个图像。

.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 将所有内容保持在左侧而不是居中。我究竟做错了什么？

Answer 1

margin: 0 auto仅将具有定义宽度的块级元素居中（如<div>'s、<p>'s 或内联元素 - 如<a>'s with display: block）

如果要使一个inline-block或多个元素居中，则必须text-align: center在其父级上使用。

Answer 2

好像您的班级名称不匹配；目前“music2”和“music3”没有要应用的 HTML 元素。

将“music2”和“music3”更改为“documents”和“photos”，然后所有 3 个 div 将水平对齐。