Проблемы с центрированием миниатюр

Question

Я создаю отзывчивую страницу с эскизами и ее нужно центрировать. Я определяю размер элементов на%. Поэтому, когда я пытаюсь сосредоточить все содержимое контейнера, он не работает, так как маржа слева от элемента слева также имеет% от поля. Вот мой HTML:

<div class="thumb-container">   
     <div class="clearfix">  
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
      <a href="" class="thumb-unit"></a> 
     </div>     
</div> 

и CSS:

.clearfix { 
     overflow: auto;} 
    .thumb-container { 
     width: 92%; 
     margin: 0 auto 0; 
     padding-top: 67px; 
     +clearfix;} 
    .thumb-unit { 
     display: block; 
     width: 27%; 
     padding-top: 35%; 
     margin-left: 5.55556%; 

     margin-top: 4.33%; 
     float: left; 
     position: relative; 
     overflow: hidden;} 

Answer 1

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

HTML:

<div class="thumb-container">   
     <div class="clearfix">  
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
      <a href="" class="thumb-unit"> 
       <img src="http://placehold.it/350x150"> 
      </a> 
     </div>     
</div> 

УС: a.thumb-блок { дисплей: блок; margin-left: auto; запас правый: авто}

.thumb-container { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     display: flex; /* add */ 
     justify-content: center; /* add to align horizontal */ 
     align-items: center; /* add to align vertical */ 
    } 

Проверьте рабочую скрипку here

Answer 2

Вы должны попробовать запас 0 auto для thumb-unit класса. У вас также есть некоторые ненужные css, которые вы можете удалить, чтобы немного поработать.