无法在同位素中居中布局

我真的为此苦苦挣扎，似乎无法找到解决方案。无法在同位素中居中布局

我做了一个使用同位素的画廊。问题是我不能将整个ul放在页面的中心。

HTML

<div id="filters" class="portfolio-filters"> 
    <ul class="list-inline"> 
      <li><a id="all" href="#" data-filter="*" class="active"><h5>All</h5></a></li> 
      <li><a href="#" data-filter=".branding"><h5>Branding</h5></a></li> 
      <li><a href="#" data-filter=".design"><h5>Design</h5></a></li> 
      <li><a href="#" data-filter=".photography"><h5>Photography</h5></a></li> 
      <li><a href="#" data-filter=".videography"><h5>Videography</h5></a></li> 
      <li><a href="#" data-filter=".web"><h5>Web</h5></a></li> 
      </ul> 
</div> 

<ul class="ullist"> 
<div id="Portfolio" class="portfolio"><li class="portfolio-item branding"><div class="mainbox">*** branding ***</div></li> 
<li class="portfolio-item branding"><div class="mainbox">*** branding ***</div></li> 
<li class="portfolio-item photography"><div class="mainbox">*** photography ***</div></li> 
<li class="portfolio-item videography"><div class="mainbox">*** videography ***</div></li> 
<li class="portfolio-item web"><div class="mainbox">*** web ***</div></li> 
<li class="portfolio-item web"> <div class="mainbox">*** web ***</div> </li> 
</div>  
</ul>

$(function(){ 
    var $container = $('#Portfolio'); 

    $container.isotope({ 
    itemSelector: '.portfolio-item', 
    layoutMode: 'fitRows', 
    }); 

    $('#filters').on('click', 'a', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $('#filters a').removeClass('active'); 
    $(this).addClass('active'); 
    $container.isotope({ filter: filterValue }); 
    }); 
});

我试着在JS下面的方法，但有视觉问题的布局。

$container.isotope({ 
    // disable window resizing 
    resizable: false, 
    fotrows: { 
     columnWidth: colW

在这里你可以看到代码的真人版：http://codepen.io/mariomez/pen/doJvJz

来源

2015-11-19 Mdermez

它看起来以我为中心......定义“有布局的视觉问题”。 –

尝试使用CSS代替，检查出答案 –

@Jonathan ..按钮居中，但整个ul列表在左侧。 – Mdermez

尝试把你的ul在一个div像

<div id="center_div"> 
    <ul> 
    <!-- your ul content--> 
    </ul> 
</div>

，然后使用CSS像

#center_div { 
    display: table; 
    margin: 0 auto; 
}

居中

来源

2015-11-19 20:04:29

无法在同位素中居中布局

回答

相关问题