水平對齊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/