是否有可能精確地將Masonry.js內容居中？

我正在嘗試構建一個到四列的佈局 - 使用砌體插件設計的每個頁面的變量。到目前爲止，我很喜歡它的工作原理。是否有可能精確地將Masonry.js內容居中？

然而，它留下了一個非常惱人的差距，我似乎無法擺脫的配置。

要指出 - 它已經集中在頁面上。但是，在居中區塊內，內容顯示爲左對齊。

內內容沒有邊距任一。砌體被初始化爲：

$('.msgblock').masonry({ 
     columnWidth: '.grid-item', 
     gutter: 8, 
     itemSelector: '.grid-item', 
     fitWidth: true, 
     resize: false 
});

我在CSS完全消除的.msgblock寬度，所以它是由插件提供。

.msgblock { 
    min-height: 100%; 
    margin: 0 auto; 
    z-index: 1; 
} 

.grid-item { 
    min-height: 100%; 
    padding-top: 10px; 
}

來源

2017-02-20 Merlin

嘗試使用柔性方法：

.grid-item { 
    min-height: 100%; 
    padding-top: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

更新：填寫您可以使用stretch選項的差距。這裏有一個小提琴

.grid-item { 
 
    background: ghostwhite; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    display: inline-flex; 
 
    min-height: 200px; 
 
    align-self: stretch; 
 
    flex-direction: column; 
 
    flex: 1 0 auto; 
 
    outline: 1px solid #dde; 
 
} 
 

 
.grid-item:nth-child(2n+1) { 
 
    background: ghostwhite; 
 
} 
 

 
.grid-item:nth-child(2n) { 
 
    background: #eef; 
 
} 
 

 
.row { 
 
    width: 100%; 
 
    background: gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
}

<div class="row"> 
 
    <div class="grid-item" style='min-width:60%'>Cell 1</div> 
 
    <div class="grid-item" style='min-width:35%'>Cell 2</div> 
 
    <div class="grid-item" style='min-width:45%'>Cell 3</div> 
 
    <div class="grid-item" style='min-width:25%'>Cell 4</div> 
 
    <div class="grid-item" style='min-width:15%'>Cell 5</div> 
 
</div>

來源

2017-02-20 07:13:23

不幸的是 - 最右邊的差距仍然存在，並增加一個內容，另一個塊被...壓扁。它忽略了塊寬度屬性（動態分配，但仍然沒有邊距/填充） – Merlin

您會使用等高行內容嗎？或者他們也會像磚石一樣？ –

我正在佈置一列網格，但在列內的內容可以是可變高度。 – Merlin

一些研究和測試後，我決定去與CSS Flexbox的財產。它可以做到我需要做的事情，而不需要像砌體那樣麻煩，而且我的瀏覽器支持計劃可以追溯到IE 11--所以它應該是更好的選擇。這樣做也消除了系統中的一些JS負載。

來源

2017-02-20 09:37:09 Merlin

是否有可能精確地將Masonry.js內容居中？

回答

相關問題