Html - how to vertically align two items to two different levels in a container

AmandaCrawford
February 19, 2024
190 views
2 votes
3 Answers

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.

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>

Tags: css html

Answers

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>

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>

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.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how to vertically align two items to two different levels in a container

Answers