1

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

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

非常感谢您的帮助

4

1 回答 1

2

如果你想在 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 问题，我们会讨论。我很想听听你的想法。

于 2014-05-01T07:34:54.897 回答