Как выравнивать изображения одинакового размера в галерее с использованием поля: авто?

Question

У меня есть галерея изображений в div элемент «контейнер» с width:70%. Эти образы должны быть оправданы с автоматическими полями.

Вот мой HTML код: (У меня есть 4 изображения)

<div class="container">   
    <ul class="grid gallery"> 
     <li class="animation-element"> 
      <figure> 
       <img src="http://s33.postimg.org/638l2frnz/google_logo.png" alt="GINIS"> 
       <figcaption> 
        <h3>Name</h3> 
        <span>Description</span> 
       </figcaption> 
      </figure> 
    </li>   
</div> 

И есть код CSS:

.grid { 
    width:100%; 
    margin: 0 auto; 
    list-style: none; 
    text-align:left;} 
.grid li { 
    border:1px solid blue; 
    box-shadow:0px 0px 1px #black; 
    display: inline-block; 
    width: 250px; 
    margin-bottom:20px; 
    font-family: "Ubuntu", sans-serif; 
    text-align: left; 
    position: relative;} 

В CSS коде это (Li) является основным элементов, которые должны быть оправданы.

Вот мой пример кода:http://codepen.io/anon/pen/QEybgL

Answer 1

Добавьте это в CSS код:

.grid { 
    padding: 0; 
    display: flex; 
} 

.grid > li { 
    margin: auto auto 20px auto; 
    justify-content: space-around; 
} 

Объяснение:

прогибается значение: Это позволяет гибкий conte xt для всех его прямых детей.

justify-content: Это определяет выравнивание вдоль основной оси. Это помогает распределить дополнительное свободное пространство, оставшееся после того, как все гибкие элементы на линии негибкие или гибкие, но достигли максимального размера. Он также оказывает некоторый контроль над выравниванием элементов, когда они переполняют линию.

значение пробега: элементы равномерно распределены по линии с равным пространством вокруг них (если элементы имеют одинаковый размер).

margin: Порог, установленный на auto в гибком контейнере, поглощает дополнительное пространство.

---

Я бы рекомендовал вам прочитать про flexbox.

Answer 2

Это легкое исправление. Вы также можете использовать flex, если хотите, как уже упоминалось, но обязательно добавьте отскоки, если вы это сделаете. Flex может быть лучшим в долгосрочной перспективе для галереи.

Если нет, то просто изменить свой .grid класс следующим образом:

.grid { 
    padding:0; 
    list-style: none; 
    text-align:center; 
}