Horizontally align images in div

Question

I am trying to align these images horizontally but it just won't work. I have tried floating them and using inline-block CSS but I think I'm just missing something simple.

<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

I'm not sure about what you want to do, so I'm going to provide two answers.

1) If you want to distribute your pictures horizontally, you need two things. First, make footer-bottom bigger. Right now, it's too small to fit more than one picture. I changed the width of this container to auto , to fit the width of the screen.

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

---

If you want to horizontally align your pictures, like centering them, just set margin-left and margin-right of .footer-container to 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

This should work for you:

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

FIDDLE: https://jsfiddle.net/3fb6msvm/