Snowflake Snowflake - 1 year ago 71
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:

#border{
@include container;
@include clearfix;
}

#logo{
@include span(3 of 12);
}

#title{
@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:

#title{
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

Answer Source

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.