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