центрирование элемента кладки в столбце

У меня проблема с Masonry v3.1.2. Я хотел бы, чтобы некоторые миниатюры были меньше других на моем макете.

Я установил максимальную ширину столбца на 400 пикселей, но иногда мне хотелось бы, чтобы некоторые изображения были меньше (например, 300 пикселей).

В настоящее время изображения выравниваются по левой стороне, но я бы хотел, чтобы они были центрированы в столбце. Как я могу центрировать меньшие изображения в центре столбца?

Это код:

    <script type="text/javascript" charset="utf-8">
    var msnry = new Masonry( container, {
      itemSelector: '.item',
        columnWidth: 350,
        "isFitWidth": true
    });
</script>

<div id="mansory-container"  data-masonry-options='{}'>
    <div class="item center">
        <a href="<?=base_url()?>projects_detail/<?=$row->documents_url?>">
            <img src="example.jpg" alt="my image" class="documents-image" />
        </a>
    </div>
</div>

<style type="text/css" media="screen">
#mansory-container{max-width:950% !important;}
.item{max-width:350px !important;margin:20px auto !important;/*position:relative !important;*/}
.documents-image{/*max-width:350px;*/}      
</style>

css masonry
person kevin34    schedule 13.04.2016    source источник
comment
Это весь ваш код? Там нет упоминания об установке максимальной ширины столбца на 400 пикселей.   -  person lukesrw    schedule 13.04.2016
comment
правильно, извините. это предыдущая версия. теперь var msnry = new Masonry( container, {itemSelector: '.item', columnWidth: 400, isFitWidth: true });   -  person kevin34    schedule 13.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно центрировать контейнер следующим образом:

#mansory-container{
  max-width:950% !important;
  margin: 0 auto; // <-- added
}

Вот код, показывающий, что это работает

person StudioTime    schedule 13.04.2016