Susy2 Sass: Centering elements vertically inside grid columns?

时间秒杀一切 提交于 2019-12-11 11:40:30

问题


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

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>

Much thanks for any help


回答1:


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);
}

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.

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.



来源:https://stackoverflow.com/questions/23394133/susy2-sass-centering-elements-vertically-inside-grid-columns

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!