Snowflake Snowflake - 7 days ago 5x
Sass (Sass) Question

susy title bar not centering

I am trying to understand scss and I am using susy to create the grid system.

My basic settings are:

$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: inside,


And I have some divides:

@include container;
@include clearfix;

@include span(3 of 12);

@include span(8 of 12);

This means that the logo does appear on the left, but I cannot get the title to center. I tired to draw a border around the divide to see what was going wrong:

position: relative;
border: 5px solid green;
h1 {
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);

The border is the expected width, but is only the height of the text, not that of the box.

How can I center the title text, and ideally auto-calculate the width of the logo image? I feel like setting the logo to be (3 of 12) spans could end badly on a small screen. I really just want the logo and title to be next to each other on the header, with the title centered vertically.

title bar


The best way to handle vertical-centering is with flexbox. Flexbox will also solve your side-by-side layout.

I don't know your markup, but something like this:

.banner {
  display: flex;
  align-items: center; // vertical centering

  .logo {
    flex: 0 0 auto; // logo wont flex

  .title {
    flex: 1 1 auto; // title will grow and shrink

You probably don't need Susy for this at all, but you can use it with flexbox if you want your logo aligned to a grid. Replace auto with span(3 of 12), and the logo will get its width from Susy.