центр изображения в кладке

Question

Я использую masonry размещать свои изображения красиво на большом экране, как это:

<div class="grid" > 
    <div class="grid-item"><img class='link img-link' src="images/image1.gif"></div> 
    <div class="grid-item"><img class='link img-link' src="images/image2.gif"></div> 
    <div class="grid-item"><img class='link img-link' src="images/image3.gif"></div> 
    </div> 

и следующий JQuery отрезала

$(document).ready(function(){ 
     $('.grid').masonry({ 
     columnWidth: 1, 
     itemSelector: '.grid-item' 
     }); 
}); 

Однако приятно размещение не является необходимым при использовании мобильный телефон. В настоящее время на мобильном экране изображения не центрированы, а выравниваются влево. Установка text-align:center на grid или grid-item не помогает. Как я могу центрировать изображения, когда все они перечислены ниже?

Проблему можно увидеть на http://www.kristianhammerstad.com/

Вот как это выглядит в моем случае:

Answer 1

Вы должны найти пикселей, используя от которого вы хотите примените правило и используйте следующее:
Например, если вы хотите 360 пикселей и ниже: используйте следующую команду де в файле CSS:

@media screen and (max-width: 360px) { 
    .box.col3.editorial , .box.col3.poster{ 
      left: 0; 
      right: 0; 
      margin: 0 auto; 
    } 
} 

Answer 2

.masonry_item { 
    width:300px; 
    margin:0 auto 20px auto; 
    padding:20px; 
} 

снова попробуйте эту ссылку: - How to Center Masonry Container