skip to Main Content

I’m having difficulty aligning things correctly on the nav-bar. I want the words (home, players, about, contact) to be vertically aligned to the middle of the heart logo.

This is what it looks like now:

img1

I want it to look like this (did it on Photoshop)

img2

The code I have right now is:

body {
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  background-color: whitesmoke;
}

.container {
  width: 80%;
  margin: auto;
}


/* Header */

header {
  background: black;
  color: whitesmoke;
  padding-top: 30px;
  min-height: 50px;
  border-bottom: #fe1d61 4px solid;
}

header a {
  color: whitesmoke;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

header ul {
  margin: 0;
  padding: 0 0 20px 0;
  list-style-type: none;
  text-align: center;
}

header li {
  display: inline;
  padding: 0 100px 0 100px;
  height: 30px;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">

<body>
  <header>
    <div class="container">
      <nav>
        <ul>
          <li><a href="index.html">HOME</a></li>
          <li><a href="players.html">PLAYERS</a></li>
          <li>
            <a href="index.html"><img src="img/00nation_logo.png" width="60px"></a>
          </li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="contact.html">CONTACT</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

Sorry if there has already been a question made about this same thing, but I tried looking it up and couldn’t find anything.

3

Answers


  1. Try this & change your li CSS:

    header ul li{
        display: inline-block;
    }
    
    Login or Signup to reply.
  2. You can apply vertical-align property on your image to move it to the middle of others.
    Try this:

    style="vertical-align: middle;"

    Login or Signup to reply.
  3. For that you need to add some more CSS like

    header li{
        display: inline;
        padding: 0 100px 0 100px;
        height: 30px;
        vertical-align: middle;   // add this line
        line-height: normal;      // add this line
    }
    

    Check on Full Screen

    Here you can check full Example

    body{
        padding: 0;
        margin: 0;
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5;
        background-color: whitesmoke;
    }
    
    .container{
        width: 80%;
        margin: auto;
    }
    
    /* Header */
    header{
        background: black;
        color: whitesmoke;
        padding-top: 30px;
        min-height: 50px;
        border-bottom: #fe1d61 4px solid;
    }
    
    header a{
        color: whitesmoke;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
    }
    
    header ul{
        margin: 0;
        padding: 0 0 20px 0;
        list-style-type: none;
        text-align: center;
    }
    
    header li{
        display: inline;
        padding: 0 100px 0 100px;
        height: 30px;
        vertical-align: middle;
        line-height: normal;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Norwegian-based esports organization with teams in CS:GO, Rocket League, and many other games.">
        <meta name="author" content="@__jmarcelo__">
        <link rel="stylesheet" href="./css/style.css">
        <title>00 Nation DNB | Home</title>
    </head>
    <body>
        <header>
            <div class="container">
                <nav>
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="players.html">PLAYERS</a></li>
                        <li><a href="index.html"><img src="https://pbs.twimg.com/media/E-YiHwfXsAEAuiZ.jpg" width="60px"></a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search