Why is the li moving below the image after i set it to inline-block?

Question

I am trying to create a nav bar and i don't know why i am facing this problem : Trying to set the li within the ul as inline-block works, but it is moving the whole list below the image i am using as a logo. Can someone explain why is this happening and how to fix it? https://codepen.io/rou-teodor/pen/QWNrVNZ

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

body {
  background-color: black;
}

img {
  display: inline-block;
  width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 150px;
  position: center;
  display: inline-block;
}

#nav-bar {
  background-color: yellow;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#nav-bar li {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
        <ul>
          <li class="nav-link"><a href="#">acasa</a></li>
          <li class="nav-link"><a href="#">despre</a></li>
          <li class="nav-link"><a href="#">produse</a></li>
          <li class="nav-link"><a href="#">cumpara</a></li>
        </ul>
      </nav>
      <img src="cover.jpeg" alt="" id="header-img" />
      <p></p>
    </header>

    <section class="products">
      <div class="product1"></div>
      <div class="product2"></div>
      <div class="product3"></div>
    </section>

    <div class="form">
      <!-- Formular cumparare -->
    </div>
  </body>
</html>

Use `vertical-align: middle` on your `.logo` class instead of **position** — Himanshu Aggarwal, Sep 12 '20 at 15:07

Johannes · Answer 1 · 2020-09-12T14:33:35.233

The navbar isn't below the logo, it's just on the same line. The reason for the way it looks is that the logo image is quite high (select it in the browser tools to see that)

To have the navbar vertically centered to the logo, you can add display: flex; and align-items: center; to the CSS rule for #nav-bar

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

body {
  background-color: black;
}

img {
  display: inline-block;
  width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 150px;
  position: center;
  display: inline-block;
}

#nav-bar {
  background-color: yellow;
  display: flex;
  align-items: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

#nav-bar li {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <header id="header">
    <nav id="nav-bar">
      <img src="https://lh3.googleusercontent.com/proxy/Gyq8iOFxCVu1elwlR_1-GxK3u-TUWFFlOQSqrfDZgAHetn8z2IwFTVlfxbFKi22xFMo50VuCSigKfek8gVmIspvxC-TIr0Ve0a5eke9v72M3k9xkxmhrsdxYpiqgnFm6Sg" alt="" class="logo" />
      <ul>
        <li class="nav-link"><a href="#">acasa</a></li>
        <li class="nav-link"><a href="#">despre</a></li>
        <li class="nav-link"><a href="#">produse</a></li>
        <li class="nav-link"><a href="#">cumpara</a></li>
      </ul>
    </nav>
    <img src="cover.jpeg" alt="" id="header-img" />
    <p></p>
  </header>

  <section class="products">
    <div class="product1"></div>
    <div class="product2"></div>
    <div class="product3"></div>
  </section>

  <div class="form">
    <!-- Formular cumparare -->
  </div>
</body>

</html>

score -1 · Accepted Answer · answered Sep 12 '20 at 14:25

-1

Add display: flex;align-items: center; to align vertically center the navbar :)

#nav-bar {
    background-color: yellow;
    display: flex;
    align-items: center;
}

answered Sep 12 '20 at 14:25

Rayees AC

4,426
3
8
31

Why is the li moving below the image after i set it to inline-block?

2 Answers2