中心對齊網格沒有間隙和浮動

Question

我有一個網格設置在塊中心對齊的地方，因此我已經使用display: inline block並將text-align: center設置爲容器。但現在客戶想要塊上的變量高度，因爲它們是內聯塊，所以現在在網格中留下了很大的空白。或者我可以使用float: left，但這不會工作，因爲塊需要居中。我在這裏有一個codepen設置：https://codepen.io/anon/pen/WOaeve

我通常使用同位素插件的網格，但沒有佈局模式，將允許中心對齊的塊，所以我需要一個解決方案，將允許網格中的所有間隙被填充並且塊被居中。這裏是我的CSS標記也：

.feed-grid { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    font-size: 0; 
} 

.feed-grid .grid-block { 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 6px; 
    margin-right: 6px; 
    margin-bottom: 12px; 
    width: auto; 
    height: 255px; 
} 

.feed-grid .grid-block.large { 
    height: 522px; 
} 

.feed-grid .grid-block img { 
    position: relative; 
    display: block; 
    width: auto; 
    height: 255px; 
} 

.feed-grid .grid-block.large img { 
    height: 522px; 
} 

任何解決方案，將不勝感激！

Answer 1

它可以解決你的問題。我在.child元素中使用了float: left;。

.container {background: green; overflow: hidden; text-align: center; padding: 15px;} 
 
.center-element {float: none; background: yellow; overflow: hidden; width: auto; box-sizing: border-box; display: inline-block; padding: 5px; vertical-align: middle;} 
 
.child {float: left; padding: 12px 24px; background-color: red;} 
 
.child:not(:first-child) {margin-left: 5px;}

<div class="container"> 
 
\t <div class="center-element"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</div>

Answer 2

什麼在你有比它的「行」更小的圖像的情況下，垂直中間alignement？

這裏是一個CodePen

$(document).ready(function(){ 
    var rowHeight = 0; 
    var rowHeights = []; 
    var rowCount = 0; 
    var offset = $(".grid-block").first().offset().top; 

    // Loop throught all images to get their heights. 
    $(".grid-block img").each(function(){ 

    // If on the same row 
    if($(this).offset().top == offset){ 
     // Find the biggest height 
     if($(this).height() > rowHeight){ 
     rowHeight = $(this).height(); 
     rowHeights[rowCount] = rowHeight; 
     } 

     // If the row is different. 
    }else{ 
     // Get the new row offset. 
     offset = $(this).offset().top; 
     rowCount++; 

     rowHeight = $(this).height(); 
     rowHeights.push(rowHeight); 
    } 

    // Set a custom attribute to apply the right margins. 
    $(this).attr("data-row",rowCount); 
    }); 

    //Here you have the array of row heights in console. 
    console.log(JSON.stringify(rowHeights)); 


    // Loop again to apply some margins. 
    $(".grid-block img").each(function(){ 
    var thisRowHeight = rowHeights[parseInt($(this).data("row"))]; 

    // Apply the margin if this image is smaller than the row height. 
    if($(this).height() < thisRowHeight){ 
     var margin = (thisRowHeight - $(this).height())/2; 
     $(this).css({"margin":margin+"px 0"}); 
    } 
    }); 
}); 

據「辦法」行高保證金適用於小型圖像......在中間使它們。