susyタイトルバーがセンタリングされていません

Question

私はscssを理解しようとしていますが、私はsusyを使ってグリッドシステムを作成しています。

私の基本的な設定は次のとおりです。

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

); 

そして、私はいくつかの分裂を持っている：

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

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

#title{ 
    @include span(8 of 12); 
} 

これはロゴが左側に表示されないことを意味しますが、私は中央にタイトルを取得することはできません。私は疲れて間違って何が起こっていたか確認するために除算の周囲に境界線を描画します

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

ボーダーが予想される幅ですが、箱のそのテキストの高さだけではありません。

タイトルテキストを中央に配置し、ロゴイメージの幅を自動計算するにはどうすればよいですか？私はロゴを（12のうちの3つ）スパンが小さな画面でひどく終わる可能性があるように設定するように感じます。私は本当にロゴとタイトルがヘッダー上で互いに隣り合っていて、タイトルが垂直になるようにしたいだけです。

title bar

Answer 1

垂直センタリングを処理するための最良の方法はflexboxです。 Flexboxは、サイドバイサイドレイアウトも解決します。

私はあなたのマークアップを知らないが、このような何か：

.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 
    } 
} 

あなたは、おそらくすべてで、このためにスージーは必要ありませんが、あなたはあなたのロゴがに揃えたい場合は、フレキシボックスでそれを使用することができますグリッド。 autoをspan(3 of 12)に置き換え、ロゴの幅がSusyから変更されます。