我如何将这个 header 与 flexbox 垂直对齐？

Question

still learning flexbox. I can´t find the reason about how the items on the nav element are not vertically aligned with the h1 text. Would love some help. Link for the codepen at the end.

The expected result should be both the nav and the h1, inside the.main-header, vertically aligned.

---

HTML:

    <div class="container">
      <header class="main-header clearfix">
        <h1>📘 The Code Magazine</h1>

        <nav>
          <!-- <strong>This is the navigation</strong> -->
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="flexbox.html">Flexbox</a>
          <a href="css-grid.html">CSS Grid</a>
        </nav>
      </header>
</div>

---

CCS:

* {
  /* border-top: 10px solid #1098ad; */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: #444;
  font-family: sans-serif;

  border-top: 10px solid #1098ad;
  position: relative;
}

.main-header {
  background-color: #f7f7f7;
  /* padding: 20px;
  padding-left: 40px;
  padding-right: 40px; */
  padding: 20px 40px;
  margin-bottom: 60px;
  /* height: 80px; */
}

nav {
  font-size: 18px;
  /* text-align: center; */
}

h1,
h2,
h3 {
  color: #1098ad;
}

h1 {
  font-size: 26px;
  text-transform: uppercase;
  font-style: italic;
}

a:link {
  color: #1098ad;
  text-decoration: none;
}

a:visited {
  /* color: #777; */
  color: #1098ad;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline orangered;
}

a:active {
  background-color: black;
  font-style: italic;
}

nav a:link {
  /* background-color: orangered;
  margin: 20px;
  padding: 20px;
  
  display: block; */
  margin-right: 30px;
  display: inline-block;
}

.main-header {
  display: flex;
  align-items: center;
}

Here is the link for the codepen:

https://codepen.io/Swanbe/pen/OJzpjor

Thanks in advance!

Answer 1

For past 10 minutes, I have been debugging your code. Wrote another code like this to see if the problem persists. But that was vertically aligned. So I dug deeper and tried changing and tags. Nothing Great. .... Until I just removed that blue rubber(Emoji or whatever you call that ) and added a property in nav.

    nav {
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;}

and that's it. Try removing that emoji and see if it helps.