susy title bar not centering

Question

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 1

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.