Question

我一直试图将我的图像容器居中，并尝试了margin-left：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>

将装有图像的容器居中放置在CSS中

1 个答案: