如何將文本與導航欄中心的徽標對齊？

Question

在我的導航欄中，我希望我的徽標文本與徽標垂直居中。 這是它現在的樣子。

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;
}

我是 web 開發的新手。 我嘗試了各種方法，例如 span 和 table，但我無法弄清楚這個問題。

Answer 1

看來您可以只使用flex布局並設置align-items: center為.logo 。

有關Flex布局的更多信息

例子：

.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

將.logo容器指定為 flexbox，然后結合使用 margin 和align-items ，您應該能夠垂直居中對齊。 該圖像已更改為可公開訪問的圖像，並且在 css 中應用了邊框以便於識別。

 .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

您可以使用 flexbox 來對齊您的物品。 您可以根據需要使用它來對齊它。 將此添加到您的“.logo”class 中以使其對齊。

  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>