css - 在 css 中将一个装满图像的容器居中

Question

我一直在尝试将我的图像容器居中，并尝试过 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;

}

Answer 1

改变

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>