jkhoffman jkhoffman - 17 days ago 7
CSS Question

What's the best way to vertically align this h1 tag?

Thanks for checking out my question.

I'm working on a Meteor app, using StylusGrid (a flexbox grid) for my layout and Transformicons for my menu button. What's the best way to vertically align this h1?

Here's the 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>


Check out the CSS on jsFiddle. I simplified it as much as possible.

https://jsfiddle.net/41m6u14r/

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, and I'm not sure of the best way to fix it.

Suggestions would be highly appreciated!

Answer

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">
    <a href="#">Help</a>
  </section>
</header>

Comments