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

【问题标题】：Susy2 Sass: Centering elements vertically inside grid columns?Susy2 Sass：在网格列内垂直居中元素？
【发布时间】：2014-04-30 17:09:55
【问题描述】：

我在网格列内垂直居中元素时遇到了一些问题。

通常我会使用 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>

非常感谢您的帮助

【问题讨论】：

标签： sass centering susy-sass

【解决方案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，我们会谈谈。我很想听听你的想法。

【讨论】：

非常感谢！我会把一些想法放在一起并提交到github上。
谢谢！那太好了！