How can I align text with my logo in the center of my nav bar?

November 24, 2022

In my nav bar I want my logo text to be centered vertically with the logo. Here’s what it looks like right now.

HTML:

<header>
            <ul class = "logo">
                <img class = "logo-image" src = "images/logo.png" alt = "logo">
                <a href="../index.html">Ultimate Tennis Team</a>
            </ul>
            <nav>
                <ul class = "nav-links">
                    <li><a href="#">Leaderboard</a></li>
                    <li><a href="#">Scoring</a></li>
                    <li><a href="#">Sign in</a></li>
                </ul>
            </nav>

CSS:


.logo {
    margin-right: auto;
    list-style: none;
    display: inline-block;
}

.logo li {
    padding: 0px 20px;
}

.logo-image {
    cursor: pointer;
    height: 50px;
}

I’m new to web development. I’ve tried a variety of things like spans and table but I couldn’t figure out this issue.

>Solution :

Assign the .logo container as a flexbox and then, with a combination of margin and align-items you should be able to align centrally vertically. The image has been changed to a publicly accessible one and in the css a border has been applied for ease of identification.

.logo {
  margin-right: auto;
  list-style: none;
  /* position things within flex container */
  display: inline-flex;
  flex-direction:row;
  align-items:center;
}

.logo li {
  padding: 0px 20px;
}

.logo-image {
  cursor: pointer;
  height: 50px;
  border:1px solid red
}
.logo a{
  margin:0 0 0 2rem;
}

<header>
  <ul class="logo">
    <img class="logo-image" src="//img.freepik.com/free-vector/branding-identity-corporate-vector-logo-design_460848-8717.jpg?w=300" alt="logo">
    <a href="../index.html">Ultimate Tennis Team</a>
  </ul>
  <nav>
    <ul class="nav-links">
      <li><a href="#">Leaderboard</a></li>
      <li><a href="#">Scoring</a></li>
      <li><a href="#">Sign in</a></li>
    </ul>
  </nav>
</header>