如何在 <div> 内垂直对齐 <nav>？

Question

我想将我的<nav> 标记与<div> 标记的顶部对齐，但它没有发生。我尝试配置 top 属性，但没有响应。请建议我应该如何垂直顶部对齐导航栏，以便它也具有响应性。

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.block.hero .preloader {
  position: absolute;
  left: 50%;
  margin-left: -32px;
  bottom: 64px;
  -webkit-transition: .5s cubic-bezier(.6, -.28, .735, .045);
  -moz-transition: .5s cubic-bezier(.6, -.28, .735, .045);
  transition: .5s cubic-bezier(.6, -.28, .735, .045)
}

.preloader img {
  height: 64px;
  border-radius: 64px;
}

.block.hero .main-nav {
  bottom: -64px;
  -webkit-transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
  -moz-transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
  transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
  /*    margin-bottom: 26px;*/
}

.nav {
  padding: 1vh 2vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.nav a {
  text-decoration: none;
  margin-right: 15px;
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  bottom: 10vh;
}

.nav a:nth-of-type(2) {
  /*    left: 85vw;*/
  text-align: right;
}

.nav a:focus,
.nav a:visited {
  text-decoration: none;
  color: #fff;
}

.block__content img {
  position: relative;
  top: 28vh;
}

h1.section-title {
  color: #b61e56;
  font-weight: 300;
  font-size: 1.7vw;
  margin-top: 0;
  font-family: 'Roboto Condensed', sans-serif;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 100vw;
  position: relative;
  top: -100.5vh;
  background-color: rgba(50, 50, 50, 0.7);
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

<div class="site-wrapper">
  <div class="site-main fullpage">
    <section data-id="hero" class="block hero" style="margin-top:0;padding:0">
      <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
      <nav class="hamburger-icon">
        <div class="burger"></div>
        <div class="burger"></div>
        <div class="burger" style="margin-bottom: 0;"></div>
      </nav>
      <div class="block__content vertical-align-helper">
        <div class="vertical-align-middle">
          <h1 class="name">Chirag <span>Bhansali</span></h1>
          <h3 class="subtitle">Front-End Web Developer</h3>
        </div>
      </div>
    </section>

注意：我已经有this 线程，但这并没有解决我的问题。

Answer 1

重新排序您的 html。 nav 应该在您的内容之前。也从 .hamburger-icon 中删除了最高值。

.vertical-align-helper {
  height: 100vh;
}

.vertical-align-helper:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-left: -5px;
}

.vertical-align-helper>[class*=vertical-align-] {
  display: inline-block;
  width: 100%
}

.vertical-align-middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.site-wrapper {
  position: relative;
  top: 0;
  width: 100%;
  overflow: hidden
}

.block {
  position: relative
}

.block.hero {
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 300;
  overflow: hidden
}

.block.hero .block__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  user-select: none;
  cursor: default;
}

.block.hero .preloader {
  position: absolute;
  left: 50%;
  margin-left: -32px;
  bottom: 64px;
  -webkit-transition: .5s cubic-bezier(.6, -.28, .735, .045);
  -moz-transition: .5s cubic-bezier(.6, -.28, .735, .045);
  transition: .5s cubic-bezier(.6, -.28, .735, .045)
}

.preloader img {
  height: 64px;
  border-radius: 64px;
}

.block.hero .main-nav {
  bottom: -64px;
  -webkit-transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
  -moz-transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
  transition: .4s cubic-bezier(.165, .84, .44, 1) .5s;
}

.loaded .block.hero {
  position: relative
}

.loaded .block.hero .preloader {
  bottom: -200px
}

.loaded .block.hero .main-nav {
  bottom: 0
}

.block {
  min-height: 100vh;
}

.block.hero {
  background: #212121;
  color: #fff;
  height: 100vh;
}

.block.hero .name {
  font-family: 'Expletus Sans', cursive;
  font-size: 8vw;
  font-weight: 100;
  margin: 0;
  line-height: 0.8em;
}

.block.hero .name span {
  font-weight: 600;
}

.block.hero .subtitle {
  font-family: 'Titillium Web', sans-serif;
  margin: 0;
  text-transform: uppercase;
  font-size: 2vw;
  font-weight: 100;
  margin-top: 26px;
  /*    margin-bottom: 26px;*/
}

.nav {
  padding: 1vh 2vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

.nav a {
  text-decoration: none;
  margin-right: 15px;
  color: #fff;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  bottom: 10vh;
}

.nav a:nth-of-type(2) {
  /*    left: 85vw;*/
  text-align: right;
}

.nav a:focus,
.nav a:visited {
  text-decoration: none;
  color: #fff;
}

.block__content img {
  position: relative;
  top: 28vh;
}

h1.section-title {
  color: #b61e56;
  font-weight: 300;
  font-size: 1.7vw;
  margin-top: 0;
  font-family: 'Roboto Condensed', sans-serif;
}

.hamburger-icon {
  margin: 0;
  padding: 18px;
  height: 57px;
  width: 100vw;
  position: relative;
  background-color: rgba(50, 50, 50, 0.7);
}

.hamburger-icon .burger {
  margin-bottom: 5px;
  background-color: #ffffee;
  height: 2px;
  width: 30px;
  border-radius: 3px;
}

.hamburger-icon .burger:last-child {
  margin-bottom: 0;
}

<div class="site-wrapper">
  <div class="site-main fullpage">
    <section data-id="hero" class="block hero" style="margin-top:0;padding:0">

      <nav class="hamburger-icon">
        <div class="burger"></div>
        <div class="burger"></div>
        <div class="burger" style="margin-bottom: 0;"></div>
      </nav>
      <canvas class="hero__canvas" id="canvas__particles" data-bg-color="#232323"></canvas>
      <div class="block__content vertical-align-helper">
        <div class="vertical-align-middle">
          <h1 class="name">Chirag <span>Bhansali</span></h1>
          <h3 class="subtitle">Front-End Web Developer</h3>
        </div>
      </div>
    </section>