SUSY2萨斯:垂直居中格列中的元素?(Susy2 Sass: Centering elements

2019-10-20 01:21发布

我在里面网格列的垂直居中元素有点麻烦。

通常,我会使用表细胞类似的东西,但我有因与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表单元格,你应该。 与Susy始建于拆开和定制。 你可以在你喜欢的任何方式使用内置的功能。 我不是基于表格的布局的主,但它听起来像是你。 至于与Susy而言,这将是这个样子:

.section {
  display: table;
}

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

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

.col2 {
  width: span(2);
}

跨度功能的工作方式跨度混入相同,但只返回一个宽度值。 再加上你的表细胞,你应该是好去。

我们谈论的是添加表格单元输出选项,会为你做到这一点。 如果您有应当如何工作思路,开拓GitHub的问题 ,我们谈谈吧。 我很想听听你的看法。



文章来源: Susy2 Sass: Centering elements vertically inside grid columns?