Vertically align h1 tag - css

Question

I'm working on a Meteor app, using StylusGrid (a flexbox grid) for my layout and Transformicons for my menu button.
How can I vertically align this 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">
Help
</section>
</header>
CSS on jsFiddle.
I want the H1 tag to be in line with the button in, vertically centered.
I set the flexbox grid rules so that it would vertically center the contents, which is working fine for the menu button and help link.
But the H1 is out of place. How can I fix it?

Answer 1

Add to h1 CSS:
vertical-align: middle;
Works for me: 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">
Help
</section>
</header>