水平对齐div中的图像

Question

我正在尝试水平对齐这些图像，但它不起作用。 我试过浮动它们并使用内联块 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设置为auto 。

 .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>

Answer 2

这应该适合你：

.footer-container {
    position: relative;
    margin: 0 auto;
    width: 120px;
    height: 72px;
}

小提琴： https ://jsfiddle.net/3fb6msvm/