Javascript 居中对齐栅格，无间隙和浮动

我在块中心对齐的地方设置了一个网格，因此我使用

display:inline block

并将

text align:center

设置到容器。但是现在客户端希望块上的高度可变，这会在网格中留下很大的间隙，因为它们是内联块。或者我可以使用

float:left

，但这不起作用，因为块需要居中。我在这里设置了密码笔：

我通常在网格中使用同位素插件，但没有允许居中对齐块的布局模式，因此我需要一个解决方案，允许填充网格中的所有间隙，并将块居中。以下是我的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;
}

---

任何解决方案都将不胜感激

它可能会解决你的问题。我使用了

float:left在
子元素中


.container{背景：绿色；溢出：隐藏；文本对齐：居中；填充：15px；}
.center元素{浮点：无；背景：黄色；溢出：隐藏；宽度：自动；框大小：边框框；显示：内联块；填充：5px；垂直对齐：中间；}
.child{float:left；padding:12px 24px；背景色：红色；}
.child:not（：first child）{左边距：5px；}
如果图像比“行”小，垂直中间对齐如何

这是一个

$（文档）.ready（函数（）{
var rowHeight=0；
var rowHeights=[]；
var rowCount=0；
变量偏移量=$（“.grid block”）.first（）.offset（）.top；
//循环浏览所有图像以获得它们的高度。
$（“.grid block img”）。每个（函数（）{
//如果在同一行
if（$（this）.offset（）.top==偏移量）{
//找到最大的高度
if（$（this）.height（）>行高）{
rowHeight=$（this.height（）；
rowHeights[rowCount]=行高；
}
//如果行不同。
}否则{
//获取新行偏移量。
偏移量=$（this）.offset（）.top；
行计数++；
rowHeight=$（this.height（）；
rowHeight.推（rowHeight）；
}
//设置自定义属性以应用右边距。
$（this.attr（“数据行”，rowCount）；
});
//这里是控制台中的行高度数组。
log（JSON.stringify（rowHeights））；
//再次循环以应用一些边距。
$（“.grid block img”）。每个（函数（）{
var thisRowHeight=rowHeights[parseInt（$（this）.data（“row”））]；
//如果此图像小于行高，则应用边距。
如果（$（this）.height（）

它“测量”行高，以便对小图像应用边距。。。把它们放在中间。
很接近，但问题是，因为我现在有了双倍高的图像，我需要用小的图像来填充周围的空间，并且不留下任何空隙——就像砖石或同位素一样。有什么建议吗？如果纵横比不是问题，你可以试试看。。。这些图像是为了“回流”改变它们在网格上的位置以缩小间隙吗？@Afrowave是的，这是一个想法，间隙需要填充…例如，当你使用同位素或砖石插件时。但它们都不允许像我的演示一样使用中间块
$(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"});
    }
  });
});