垂直对齐h1标签

Question

我正在使用Meteor应用程序，使用StylusGrid（一个flexbox网格）进行布局，使用Transformicons进行菜单按钮。
我怎样才能垂直对齐这个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：

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

适合我：JSFiddle。

段：

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;