html - 居中对齐导航元素 - 使用 Flexbox

Question

我在将导航元素垂直居中固定在固定导航中时遇到问题。通过研究我已经着手使用 flex-box 但是现在元素垂直居中对齐到屏幕尺寸，而不是导航。这里的代码:

CSS:

html {
  height: 100%;
 }

body {
  font-family: 'Nunito Sans';
  color: black;
  margin: 0 !important;
  min-height: 100%;
 }

 *, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

nav {
  background-color: #0065E3;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width:100%;
  height: 10%;
  display: block;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

nav img{
  height:90%;
}

.navBar .logo {
  position: relative;
}

nav a {
  position: relative;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  line-height:90%;
  vertical-align: middle;
  margin: 1rem;
  padding: 30% 0;
}

.navBar-wrapper{
  height: 10%;
  margin: 0;
  padding: 0;
  border: 0;
}

和 HTML:

  <section class="navBar-wrapper">
   <nav class-"navBar"> <!-- navigation bar -->
    <div class="container">
     <img src="assets/images/logo.png" alt="Logo" class="logo">
     <a href="#">TV</a>
     <a href="#">Digital</a>
    </div>
   </nav>
  </section>

非常感谢任何帮助。谢谢!

Answer 1

flex 容器实际上位于固定的 nav 栏的中心。

html {
  height: 100%;
}

body {
  font-family: 'Nunito Sans';
  color: black;
  margin: 0 !important;
  min-height: 100%;
}

*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav {
  background-color: #0065E3;
  position: fixed;   /* Set the navbar to fixed position */
  top: 0;   /* Position the navbar at the top of the page */
  width: 100%;
  /* height: 10%; */
  display: block;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

nav img {
  height: 90%;
}

.navBar .logo {
  position: relative;
}

nav a {
  position: relative;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 90%;
  vertical-align: middle;
  margin: 1rem;
  padding: 30% 0;
}

.navBar-wrapper {
  height: 10%;
  margin: 0;
  padding: 0;
  border: 0;
}

<section class="navBar-wrapper">
  <nav class= "navBar">
    <!-- navigation bar -->
    <div class="container">
      <img src="assets/images/logo.png" alt="Logo" class="logo">
      <a href="#">TV</a>
      <a href="#">Digital</a>
    </div>
  </nav>
</section>

但是一旦您将固定元素的高度更改为 10%，子元素就不会跟随(至少在 Chrome 中——这在 Edge 中不是问题)。

我建议删除额外的容器，使图像和 anchor 成为 nav 的子元素。

html {
  height: 100%;
}

body {
  font-family: 'Nunito Sans';
  color: black;
  margin: 0 !important;
  min-height: 100%;
}

*,
*::before,
*::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav {
  background-color: #0065E3;
  position: fixed;   /* Set the navbar to fixed position */
  top: 0;   /* Position the navbar at the top of the page */
  width: 100%;
  height: 10%;
  /* display: block; */
  margin: 0;
  
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


nav a {
  position: relative;
  text-align: left;
  text-decoration: none;
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  line-height: 90%;
  vertical-align: middle;
  margin: 1rem;
  padding: 30% 0;
}

.navBar-wrapper {
  height: 10%;
  margin: 0;
  padding: 0;
  border: 0;
}

<section class="navBar-wrapper">
  <nav class= "navBar">
    <!-- navigation bar -->
      <img src="assets/images/logo.png" alt="Logo" class="logo">
      <a href="#">TV</a>
      <a href="#">Digital</a>
  </nav>
</section>