【发布时间】：2017-07-09 22:39:02
【问题描述】：
我的图片不会以margin: 0 auto; 或padding: 0 auto; 居中
如果我在它周围的<div> 中执行text-align: center;，它也不起作用。
我认为这是因为图像是响应式的。
那么如何让这些图像居中呢？
@media only screen and (min-width: 1001px) {
.gallerij {
max-width: 825px;
margin: 20px auto;
padding: 0 10px 30px 200px;
}
}
.gallerij h1 {
margin-left: 10px;
}
.gallerij div.img {
border: 1px solid #ccc;
padding: 0;
margin-top: 10px;
background-color: rgba(211, 211, 211, 0.30);
}
.gallerij div.img:hover {
border: 1px solid #000000;
}
.gallerij div.img img {
display: block;
width: auto;
max-width: 100%;
height: 200px;
padding: 3px;
margin-left: auto;
margin-right: auto;
}
.gallerij div.desc {
padding: 15px;
text-align: center;
}
.gallerij * {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.9999%;
max-width: 200px;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.gallerij .clearfix:after {
content: "";
display: table;
clear: both;
margin-bottom: 30px;
}<div class="gallerij">
<h1 class="page-titel">All articles:</h1><br>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img2.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img4.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a href="#">
<img src="img/ERD_Easy/img3.jpg" alt="" class="article-img">
</a>
<div class="desc">Artikel naam + kleine bescrijving</div>
</div>
</div>
<div class="clearfix"></div>
</div>HTML 看起来那么长，因为我必须做更多的图像，这样你才能明白我的意思。当您单击“整页”时，它们将是 4 个彼此相邻的图像，在这个小（可能）3 个中，我不知道您是否可以将其变小，但随后它将变为 2 个图像，最后是 1 个。 当它为 3 和 4 时，它居中，但当它位于 2 或 1 时，它将不再居中。如果你能看到它没有以 sn-p 为中心，我会粘贴一些打印屏幕来显示它。
唯一的问题是它们没有居中，我找不到如何做到这一点。
您需要更多代码或信息吗？
【问题讨论】：
-
如果你想用
margin: 0 auto;使图像居中，你需要提供一个宽度，而不是auto -
将浮动设置为无。确保图像显示：也阻止。 （他们应该是自然的。）
-
为什么 .responsive 的最大宽度为 200px？这在任何地方都没有被覆盖，这可能是你的问题？您唯一覆盖的是媒体查询中的宽度。
-
最大宽度仅在 24.999% 或 49.999% 大于 200px 时发生，并且图片在宽度超过 200px 时看起来不太好，所以这就是我添加的原因。
-
您是否更改了其他内容？您的代码 sn-p 在建议的更改下完全按预期工作。
标签： html css responsive-design responsive