中心对齐导航元素 - 使用Flexbox

Question

我有问题将导航元素垂直居中在固定导航中。通过研究，我已经着手使用弹性盒，但是现在元素垂直对齐屏幕尺寸，而不是导航。代码如下：

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栏内。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是一旦你将固定元素的高度更改为10％，子元素就不会跟随（至少在Chrome中 - 这不是Edge中的问题）。

我建议删除额外的容器，制作图像并锚定nav的子项。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;