Mutiple изображения в одной строке CSS + Div

Question

Используется этот код вокруг каждого изображения

<div class="side-by-side"> <a href="http://example.com ....> (include ALL the code for the image here) </div> 

Это CSS Сниппет

.side-by-side { float: left; margin-right: 5px } 

Он работает ... Я имею в виду изображения на одной линии Но к сожалению, изображения выравниваются влево, и я хочу, чтобы они были центрированы, все вместе.

Answer 1

Я бы использовал Flexbox для этого. Оберните ваш div в контейнере

<div class="container"> 
    <div class="side-by-side"> <a href="http://example.com"></a> 
    </div> 
</div> 

CSS

.container { 
     display: flex; 
     justify-content: center; 
} 

Answer 2

Оберните ваши изображения в DIV и установить text-align:center; тогда вам не нужен дополнительный DIV, чтобы обернуть свои метки А, в вы можете просто стилизовать а, сам тег. Как так:

<div class="centered-content"> 
    <a href="#" class="side-by-side"> 
    <img src="http://placehold.it/100x100"/> 
    </a> 
    <a href="#" class="side-by-side"> 
    <img src="http://placehold.it/100x100"/> 
    </a> 
    <a href="#" class="side-by-side"> 
    <img src="http://placehold.it/100x100"/> 
    </a> 
</div> 

И Css:

.centered-content{ 
    text-align:center; 
} 
.side-by-side{ 
    margin-right:5px; 
    display:inline-block; 
}