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

我想将<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线程，但这不能解决我的问题。

最佳答案

重新排序了您的html。导航应该在您的内容之前。也从.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>

关于html - 如何在<div>内部垂直对齐<nav>？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43846682/