Snowflake Snowflake - 1 month ago 19
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

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.

Comments