h1タグを垂直に整列する

Question

私はレイアウト用にStylusGrid（フレックスボックスグリッド）を使用し、メニューボタン用にTransformiconsを使用してMeteorアプリケーションを開発しています。
このh1をどのように縦に並べることができますか？

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。

H1タグをボタン中央に、縦にセンタリングします。
フレックスボックスグリッドのルールを設定して、メニューボタンとヘルプリンクのためにうまく機能しているコンテンツを垂直方向にセンタリングするようにしました。
しかし、H1は適切ではありません。どうすれば修正できますか？

Answer 1

H1のCSSに入れる：私のための

vertical-align: middle; 

作品：JSFiddleを。

スニペット：

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