垂直對齊h1標記

Question

我正在使用StylusGrid（一個flexbox網格）作爲我的佈局和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標籤與垂直居中的按鈕一致。
我設置了flexbox網格規則，以便它可以垂直居中顯示內容，這對於菜單按鈕和幫助鏈接來說工作正常。
但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>