我一直在尝试将我的图像容器居中,并尝试过 margin-left: auto;和 margin-right: auto;几乎所有与图像相关的内容。
基本上,当我缩小页面时,我希望它居中,它会自动向下移动一些图像,但是我的图像右侧有大量空白。
这是我的容器的 HTML:
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
这是我当前的 CSS:
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
vertical-align: middle;
}
.column img {
padding: 15px 15px 15px 15px;
}
最佳答案
改变
vertical-align: middle;
到
text-align: center;
#row {
padding: 20px 20px 20px 20px;
}
img {
max-width: 100%;
}
.column {
padding: 15px 15px 15px 15px;
text-align: center;
}
.column img {
padding: 15px 15px 15px 15px;
}
<div id="sponsor-container">
<div id="row">
<div class="column">
<img src="images/isc.png">
<img src="images/kendall.png">
<img src="images/whaley.png">
<img src="images/drews.png">
</div>
<div class="column">
<img src="images/amfam.png">
<img src="images/body-zone.png">
<img src="images/whitelake.png">
<img src="images/townpump.png">
</div>
</div>
</div>
关于css - 在 css 中将一个装满图像的容器居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53199096/