html - 水平对齐 div 中的图像

Question

我试图水平对齐这些图像，但它不起作用。我尝试过 float 它们并使用内联 block CSS，但我认为我只是错过了一些简单的东西。

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>

<style>
   .footer-container {
       width: 120px;
       height: 72px;
       display: inline-block;
   }

   /* resize images */
   .footer-container img {
       width: 100%;
       height: auto;
   }

</style>

Answer 1

我不确定您想做什么，所以我将提供两个答案。

1)如果你想水平分布你的图片，你需要两件事。首先，增大 footer-bottom 。现在，它太小，无法容纳多张图片。我将此容器的宽度更改为auto，以适应屏幕的宽度。

.footer-bottom {
  width: auto;
  background-color: #f1f1f1;
}

/* resize images */
.footer-container img {
  width: 50px;
  height: auto;
}

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>

---

如果你想水平对齐图片，比如居中，只需设置 .footer-container 的 margin-left 和 margin-right > 到自动。

.footer-container {
   width: 120px;
   height: 72px;
   margin-left: auto;
   margin-right: auto;
}

 /* resize images */
.footer-container img {
   width: 100%;
   height: auto;
}

<div class="footer-bottom"> 
    <div class="footer-container">

       Gold Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />
       Silver Sponsors<br />
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100">
       <img src="http://placehold.it/350x150">
       <img src="http://placehold.it/140x100"><br />

    </div>
</div>