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>'，<p>或内联元素 - 如<a>的{{1} }}）

如果您想将display: block元素置于中心位置，则必须在其父级上使用inline-block。

Answer 2

好像你的班级名字不匹配;目前'music2'和'music3'没有要应用的HTML元素。

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

不能用css中心三个div

2 个答案: