Susy2 Sass：将元素垂直放置在网格列内吗？ [英] Susy2 Sass: Centering elements vertically inside grid columns?

问题描述

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

I'm having a bit of trouble with vertically centering elements inside of grid column.

通常，我会使用table-cell这样的东西，但是我由于Susy的浮动性质，因此遇到了问题。我尝试的所有内容似乎都在某个时候分崩离析。

Typically I'd use table-cell for something like that, but I'm having problems due to the float nature of Susy. Everything I try seems to fall apart at some point.

例如，如果我想将这些元素垂直放置在各自的列中，我将如何做，假设我正在使用

For instance if I wanted to center these elements vertically in their respective column how would I do that, assuming I am using the default grid settings.

<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>

非常感谢您的帮助

推荐答案

如果要将表单元与Susy一起使用，则应该使用。 Susy旨在拆散和定制。您可以按自己喜欢的任何方式使用内置函数。我不是基于表格的布局大师，但听起来像您一样。就Susy而言，它看起来像这样：

If you want to use table-cell with Susy, you should. Susy was built to be taken apart and customized. You can use the built-in functions in any way you like. I'm no master of table-based layout, but it sounds like you are. As far as Susy is concerned, it would look something like this:

.section {
  display: table;
}

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

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

.col2 {
  width: span(2);
}

span函数的作用方式与span混合法相同，但只返回一个宽度值。将该功能与您的表格单元格结合起来，您应该就很好了。

The span function works the same way as the span mixin, but only returns a width value. Combine that with your table-cells, and you should be good to go.

我们正在谈论添加一个表格单元格输出选项，它将为您实现这一目标。如果您有关于如何运行的想法，请打开 github问题，我们将进行讨论。我很想听听您的想法。

We're talking about adding a table-cell output option that will do this for you. If you have ideas for how that should work, open up a github issue and we'll talk. I'd love to hear your thoughts.

这篇关于Susy2 Sass：将元素垂直放置在网格列内吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！