如何将文本与导航栏中心的徽标对齐？

Question

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.

Answer 1

It seems that you could just use flex layout and set align-items: center for .logo .

More about Flex layout

Exmaple:

.logo {
  margin-right: auto;
  list-style: none;
  /* 👇 Add these */
  display: flex;
  align-items: center;
  /* 👇 (Optional) set a gap between the two */
  gap: 1em;
}

Answer 2

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>

Answer 3

You can use flexbox, to align your items. You can use it to align it as you want. Add this to you `.logo´ class to make it align.

  display: flex;
  align-items: center;

 .logo { display: flex; align-items: center; }.logo li { padding: 0px 20px; }.logo-image { cursor: pointer; height: 50px; } header { display: flex; align-items: center; }.nav-links { display: flex; list-style: none; }.nav-links li { padding: 0px 5px; }

 <header> <ul class="logo"> <img class="logo-image" src="https://png.pngtree.com/png-clipart/20190524/ourmid/pngtree-tennis-ball-clipart-png-png-image_1079029.jpg" 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>