Question

我在网格列中垂直居中元素时遇到了一些麻烦。

通常我会使用table-cell这样的东西，但由于Susy的浮动特性，我遇到了问题。我尝试的一切似乎都在某种程度上崩溃了。

例如，如果我想将这些元素垂直居中在各自的列中，我将如何做到这一点，假设我使用的是默认网格设置。

<div class="section">
   <div class="col1">Some Text<br/>Some Text</div>
   <div class="col2"><img src=""/></div>
   <div class="col3">Some Text</div>
</div>

非常感谢任何帮助

Answer 1

如果你想和Susy一起使用table-cell，你应该这样做。 Susy的建造是为了拆开和定制。您可以以任何您喜欢的方式使用内置函数。我不是基于表格的布局大师，但听起来就像你一样。就Susy而言，它看起来像这样：

.section {
  display: table;
}

.col1, .col2, .col3 {
  display: table-cell;
  vertical-align: middle;
}

.col1, .col3 {
  width: span(1);
}

.col2 {
  width: span(2);
}

span函数的工作方式与span mixin相同，但只返回宽度值。将它与你的桌子细胞结合起来，你应该好好去。

我们正在谈论添加一个表单元格输出选项，它将为您执行此操作。如果您对如何运作有所了解，请打开github issue并与我们进行对话。我很想听听你的想法。

Susy2 Sass：在网格列中垂直居中元素？

1 个答案: