CODEWITHSUNDEEP
htmlcss
Adoga Patricia
Adoga Patricia

Reputation: 129

How to align floated logo in horizontal navbar

I am trying to horizontally align my logo with the list but the logo sticks up, I could use a margin to move it down but will that be the right way to align it or is there a better way.enter image description here

<div class="navigation-bar">
    <div class="nav-wrap">
      <div class="nav-bar">
        <div class="logo">
          <img class="" alt="Logo" src="../assets/logo.png" />
        </div>
        <div class="nav-list">
          <ul>
            <li>I didn’t get my tickets</li>
            <li><a>CREATE YOUR OWN EVENT</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

.nav-wrap {
  clear: both;
  overflow: auto;
  justify-content: center;
  display: flex;
}
.nav-bar {
  width: 80%;
  border: 1px solid red;
}
.logo {
  float: left;
  line-height: 70px;
  position: absolute;
}
.nav-list {
  float: right;
}
ul li {
  display: inline-block;
  padding: 10px;
  font-size: 20px;
  font-family: raleway;
}

img {
  height: 32px;
  width: 172px;
  object-fit: contain;
}

This is my code, how do I properly fix this?

Upvotes: 0

Views: 318

Answers (2)

WeirdGuy
WeirdGuy

Reputation: 3

In the .logo styling, say display: flex; and align-items: center;. If you don't understand it, go to https://www.w3schools.com/css/css3_flexbox.asp. I hope that helped!

Upvotes: 0

UnReal G
UnReal G

Reputation: 136

I have created a JSFiddle to assist you with visualising this response: https://jsfiddle.net/wn8avcbt/

In your .nav-bar class you will need to ensure that it is of display:flex and uses align content and align items with centering. align-items is the specific CSS element you are looking for: I would not make the image absolute and instead would let it follow the flex of its parent.

display: flex;
justify-content: space-between;
align-content: center;
align-items: center;

If you have any questions, feel free to comment.

Upvotes: 1

Related Questions