H1-Tag vertikal ausrichten

Question

Ich arbeite an einer Meteor-App mit StylusGrid (einem Flexbox-Gitter) für mein Layout und Transformicons für meine Menüschaltfläche.
Wie kann ich diese h1 vertikal ausrichten?

HTML:

<header class="toolbar"> 
    <section> 
    <div class="menu-button"> 
     <button type="button" class="tcon tcon-menu--xcross" aria-label="toggle menu"> 
     <span class="tcon-menu__lines" aria-hidden="true"></span> 
     <span class="tcon-visuallyhidden">toggle menu</span> 
     </button>  
    </div> 
    <h1>MyApp</h1> 
    </section> 
    <section class="links"> 
    <a href="#">Help</a> 
    </section> 
</header> 

CSS on jsFiddle.

Ich möchte die H1-Tag in der Zeile mit der Schaltfläche in, vertikal zentriert sein.
Ich habe die Flexbox-Gitterregeln so eingestellt, dass der Inhalt vertikal zentriert wird. Dies funktioniert gut für die Menüschaltfläche und den Hilfelink.
Aber die H1 ist fehl am Platz. Wie kann ich es reparieren?

Answer 1

auf h1 CSS hinzufügen:

vertical-align: middle; 

Werke für mich: JSFiddle.

Snippet:

.toolbar { 
 
    display: flex; 
 
    flex-direction: row; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    background-color: #fff; 
 
} 
 
.toolbar section { 
 
    flex-basis: calc(100% * 0.5 - 1.25rem); 
 
    -ms-flex-preferred-size: calc(100% * 0.5 - 1.25rem); 
 
    margin: 0.625rem; 
 
    -ms-flex-item-align: center; 
 
    align-self: center; 
 
} 
 
.toolbar .menu-button { 
 
    display: inline-block; 
 
} 
 
.toolbar h1 { 
 
    display: inline-block; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    vertical-align: middle; 
 
} 
 
.toolbar .links { 
 
    text-align: right; 
 
} 
 
.tcon { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    border: none; 
 
    cursor: pointer; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-justify-content: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    height: 40px; 
 
    transition: 0.3s; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    width: 40px; 
 
    background: transparent; 
 
    outline: none; 
 
    -webkit-tap-highlight-color: transparent; 
 
    -webkit-tap-highlight-color: transparent; 
 
} 
 
.tcon > * { 
 
    display: block; 
 
} 
 
.tcon:hover, 
 
.tcon:focus { 
 
    outline: none; 
 
} 
 
.tcon::-moz-focus-inner { 
 
    border: 0; 
 
} 
 
.tcon-menu__lines { 
 
    display: inline-block; 
 
    height: 5.71429px; 
 
    width: 40px; 
 
    border-radius: 2.85714px; 
 
    transition: 0.3s; 
 
    background: black; 
 
    position: relative; 
 
} 
 
.tcon-menu__lines::before, 
 
.tcon-menu__lines::after { 
 
    display: inline-block; 
 
    height: 5.71429px; 
 
    width: 40px; 
 
    border-radius: 2.85714px; 
 
    transition: 0.3s; 
 
    background: black; 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    -webkit-transform-origin: 2.85714px center; 
 
    transform-origin: 2.85714px center; 
 
    width: 100%; 
 
} 
 
.tcon-menu__lines::before { 
 
    top: 10px; 
 
} 
 
.tcon-menu__lines::after { 
 
    top: -10px; 
 
} 
 
.tcon-transform .tcon-menu__lines { 
 
    -webkit-transform: scale3d(0.8, 0.8, 0.8); 
 
    transform: scale3d(0.8, 0.8, 0.8); 
 
} 
 
.tcon-menu--xcross { 
 
    width: auto; 
 
} 
 
.tcon-menu--xcross.tcon-transform .tcon-menu__lines { 
 
    background: transparent; 
 
} 
 
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, 
 
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { 
 
    -webkit-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    top: 0; 
 
    width: 40px; 
 
} 
 
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before { 
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg); 
 
    transform: rotate3d(0, 0, 1, 45deg); 
 
} 
 
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::after { 
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg); 
 
    transform: rotate3d(0, 0, 1, -45deg); 
 
} 
 
.tcon-visuallyhidden { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 
.tcon-visuallyhidden:active, 
 
.tcon-visuallyhidden:focus { 
 
    clip: auto; 
 
    height: auto; 
 
    margin: 0; 
 
    overflow: visible; 
 
    position: static; 
 
    width: auto; 
 
}

<header class="toolbar"> 
 
    <section> 
 
    <div class="menu-button"> 
 
     <button type="button" class="tcon tcon-menu--xcross" aria-label="toggle menu"> 
 
     <span class="tcon-menu__lines" aria-hidden="true"></span> 
 
     <span class="tcon-visuallyhidden">toggle menu</span> 
 
     </button> 
 
    </div> 
 
    <h1>MyApp</h1> 
 
    </section> 
 
    <section class="links"> 
 
    <a href="#">Help</a> 
 
    </section> 
 
</header>