susy title bar nicht zentriert

Question

Ich versuche scss zu verstehen und ich benutze susy, um das Grid-System zu erstellen.

Meine Grundeinstellungen sind:

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

); 

Und ich habe einige dividieren:

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

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

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

Dies bedeutet, dass das Logo auf der linken Seite erscheint, aber ich kann nicht den Titel Center. Ich müde, um einen Rahmen um die Kluft zu ziehen, um zu sehen, was schiefgeht:

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

Die Grenze ist die erwartete Breite, ist aber nur die Höhe des Textes, nicht von der Box, dass.

Wie kann ich den Titeltext zentrieren und idealerweise automatisch die Breite des Logo-Bildes berechnen? Ich habe das Gefühl, das Logo zu setzen (3 von 12) könnte auf einem kleinen Bildschirm schlecht enden. Ich möchte nur, dass das Logo und der Titel in der Kopfzeile nebeneinander stehen und der Titel vertikal zentriert ist.

title bar

Answer 1

Der beste Weg, vertikale Zentrierung zu handhaben ist mit flexbox. Flexbox löst auch Ihr Side-by-Side-Layout.

Ich weiß nicht, Ihren Markup, aber so etwas wie dies:

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

Sie wahrscheinlich für diese überhaupt nicht Susy brauchen, aber man kann es mit Flexbox verwenden, wenn Sie Ihr Logo ausgerichtet werden sollen ein Gitter. Ersetzen Sie auto durch , und das Logo wird seine Breite von Susy bekommen.