CODEWITHSUNDEEP
sasssusy-compass
Meylo Rodriguez
Meylo Rodriguez

Reputation: 39

Vertical align with Sass, Susy and Compass

Any help is much appreciated. I'm using Sass, Compass and Susy to redesign my website. I'm needing to figure out how I can set up a vertical center in browser. I have a row with five columns and I need to center it vertically.

Here's the HTML:

<div class="layout">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

The sections create the row of columns. I need to center the .layout class vertically.

Upvotes: 0

Views: 1083

Answers (1)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

For any issue like this, start by solving for vertical-centering in CSS. The two best methods I know, only work in modern browsers. The best option is flexbox, followed by a little trick using position and transform. There are other solutions if you search around for "css vertical center".

Both of those require prefixing to work across browsers, which is where Compass might be helpful. Compass has mixins to help with both flexbox and transforms.

Upvotes: 1

Related Questions