Горизонтальное выравнивание изображений в 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>

---

Если вы хотите, чтобы горизонтально выровнять фотографии, как центрирование их, просто установите margin-left и margin-right из .footer-container в 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; 
} 

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