Navigation menu items not vertically centered-CodePudding

I have a header with an image and navigation links.

For some reason the menu items are not vertically centered.

.header {
  position: relative;
  margin-top: 70px;
  background: red;
  height: 40px;
}

.logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px;
}

.nav {
  list-style: none;
  float: right;
}

.nav li {
  display: inline-block;
}

<div class="header">
  <img src="http://placehold.it/200" class="logo" />
  <ul class="nav">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
  </ul>
</div>

Live code: https://jsfiddle.net/f2u97o3m/

I tried to add vertical-align: middle to <ul> and <li> items, But it didn't work.

Why it's not centered and how to center it vertically?

CodePudding user response：

.header {
  position: relative;
  margin-top: 70px;
  background: red;
  height: 40px;
}

.logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px;
}

.nav {
  list-style: none;
  float: right;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
  line-height: 40px;
}

<div class="header">
  <img src="http://placehold.it/200" class="logo" />
  <ul class="nav">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
  </ul>
</div>

You need to add 'margin: 0; padding: 0;' to '.nav' and to specify 'line-height: 40px' to th e'li'. I suppose you'll put inside, be sure you add that to them.

CodePudding user response：

Here is a solution to centering your ul it vertically. Instead of height: 40px; which doesn't account for the height of children, using padding: 10px 0; adds padding above and below the children. Also, instead of float: right; this solution uses text-align: right.

.header {
  position: relative;
  margin-top: 70px;
  background: red;
  /* height: 40px; */
  padding: 10px 0;
}

.logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 150px;
}

.nav {
  list-style: none;
  /* float: right; */
  text-align: right;
}

.nav li {
  display: inline-block;
}

<div class="header">
  <img src="http://placehold.it/200" class="logo" />
  <ul class="nav">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
  </ul>
</div>

CodePudding user response：

One solution would be to convert your element to a flex container.

Your code would look like this:

.nav {
    display: flex;
    align-items: center;
    height: 100%;
    float: right;
}

To create a gap between your list items, you could just add some left and right margin:

.nav li {
    margin: 0 0.5em;
}

One thing I noticed, too, is that you don't have any margin/padding resets.

At the top of your CSS, put:

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

This helps reduce some of the unexpected complications that might arise from an element's default margin and padding.

CodePudding user response：

You can use flexbox for alignment. https://www.w3schools.com/css/css3_flexbox.asp If you want to align then at the center and vertically then type like this

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

If you want it to align horizontally then you can replace the flex-direction with row like flex-direction:row;