skip to Main Content

In the figma file that I have (which I have attached), the logo is vertically centered. But the links on the right are slightly above the logo.

enter image description here

However, my code shows that both are vertically aligned:

I have tried using margin, padding, and height settings. None of them has worked. I am not sure what else to try.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Lato", sans-serif;
}

.navbar {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  padding: 50px;
  padding-left: 75px;
}

.heading {
  display: flex;
  font-size: 1.2rem;
  color: green;
}

.heading .light_text {
  font-weight: 500;
}

.house img {
  height: 30px;
}

.nav_list {
  padding-right: 100px;
  font-size: 1rem;
  font-weight: 500;
}

.nav_list ul {
  display: flex;
  /* breaks the list horizontally */
  list-style-type: none;
  /* removes the bullet points */
}

.nav_list li {
  margin: auto 15px;
}

.nav_list a {
  text-decoration: none;
  color: green;
}
<body>
  <div class="container">
    <div class="navbar">
      <div class="heading">
        <div class="logo_name">
          <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
        </div>
      </div>
      <div class="nav_list">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Reviews</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

3

Answers


  1. The simplest thing is to use transform: translateY. However, this is not best practice

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    div,li {box-shadow: 0 0 0 1px #ddd;} /* remove */
    
    html {
      font-family: "Lato", sans-serif;
    }
    
    .navbar {
      display: flex;
      justify-content: space-between;
      border: 1px solid red;
      padding: 50px;
      padding-left: 75px;
    }
    
    .heading {
      display: flex;
      font-size: 1.2rem;
      color: green;
    }
    
    .heading .light_text {
      font-weight: 500;
    }
    
    .house img {
      height: 30px;
    }
    
    .nav_list {
      padding-right: 100px;
      font-size: 1rem;
      font-weight: 500;
      transform: translateY(-2rem); /* magic is here */
    }
    
    .nav_list ul {
      display: flex;
      /* breaks the list horizontally */
      list-style-type: none;
      /* removes the bullet points */
    }
    
    .nav_list li {
      margin: auto 15px;
    }
    
    .nav_list a {
      text-decoration: none;
      color: green;
    }
    <body>
      <div class="container">
        <div class="navbar">
          <div class="heading">
            <div class="logo_name">
              <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
            </div>
          </div>
          <div class="nav_list">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">Reviews</a></li>
              <li><a href="#">Contact Us</a></li>
            </ul>
          </div>
        </div>
      </div>
    </body>
    
    </html>
    Login or Signup to reply.
  2. You can add some top margin to an element to move it lower down. In your case, just add a little top margin to .logo_name.

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-family: "Lato", sans-serif;
    }
    
    header {
      display: flex;
      justify-content: space-between;
      border: 1px solid red;
      padding: 20px;
      gap: 1em;
    }
    
    .heading {
      display: flex;
      font-size: 1.2rem;
      color: green;
    }
    
    .heading .light_text {
      font-weight: 500;
    }
    
    .logo_name {
      margin: 0.5em 0;
    }
    
    .house img {
      height: 30px;
    }
    
    nav {
      display: flex;
      gap: 1em;
    }
    
    nav a {
      text-decoration: none;
      color: green;
    }
    <header>
      <div class="heading">
        <div class="logo_name">
          <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
        </div>
      </div>
      <nav>
        <a href="#">Home</a>
        <a href="#">About Us</a>
        <a href="#">Services</a>
        <a href="#">Reviews</a>
        <a href="#">Contact Us</a>
      </nav>
    </header>
    Login or Signup to reply.
  3. You’re already using Flexbox. Simply add align-items: center to vertically center all elements.

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      font-family: "Lato", sans-serif;
    }
    
    header {
      border: 1px solid red;
      padding: 50px;
      padding-left: 75px;
    }
    
    header {
      font-size: 1.2rem;
      color: green;
    }
    
    .heading .light_text {
      font-weight: 500;
    }
    
    .house img {
      height: 30px;
    }
    
    .nav_list {
      padding-right: 100px;
      font-size: 1rem;
      font-weight: 500;
    }
    
    header,
    nav menu {
      display: flex;
      list-style-type: none;
      align-items: center;
    }
    
    nav {
      margin-left: auto;
    }
    
    nav li {
      margin: auto 15px;
    }
    
    nav a {
      text-decoration: none;
      color: green;
    }
    <header>
      <h2><span class="bold_text">RENT</span><span class="light_text">HOMES</span></h2>
      <nav>
        <menu>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Reviews</a></li>
          <li><a href="#">Contact Us</a></li>
        </menu>
      </nav>
    </header>

    You also should use semantic tags and use less unneeded divs. A logo or title is not part of a navbar. That naming is semantically wrong. What you actually should use is the <header> element. The container for the anchors are semantically a <nav> element.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search