Question

我有一个带有徽标的导航栏，我能够做到，但我无法正确对齐文本和图形。

考虑到徽标的高度，我想将文本对齐在中心。

请有任何想法？我试图改变很多东西，但没有用。在我的代码中，我只以其他徽标为例，我的原始徽标非常大。

此外，我不想在我的徽标中使用背景颜色，仅在文本中。

    <html lang="en">

    <head>
      <title>data</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
     <ul>
      <li><a href="noble"><img src="http://news.olemiss.edu/wp-content/uploads/2016/08/MoW-Logo.jpg" width="140"></a></li>

      <li><a class="active" href="index.htm">Home</a></li>

      <li><a href="#classes">Info</a></li>
      <li><a href="#DE">Photos</a></li>

       <li style="float:right"><a href="#help">Help</a></li>

      <li class="dropdown" style="float:right">
        <a href="#about" class="dropbtn">About</a>
        <div class="dropdown-content">
          <a href="team.htm">Team</a>
          <a href="events.htm">Events</a>
              </div> </li>
              </ul>

    <h1> Text....</h1>

    </body>
    </html>

我的CSS代码是：

#nav a:hover {
  color: black;
  background-color: #FFF;
  }

ul {list-style-type: none;
    font-family:calibri;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f3f3f3;
    border: 2px solid #e7e7e7;
    height: 90px;
  }

body {font-family:Times New Roman;line-height: 1.5em;}


li {float: left;}

li a {display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}

a:hover:not(.active) {background-color: #5E9F49;}

.active {background-color:#9DC690;}

li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #5E9F49;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color:#9DC690;}

.dropdown:hover .dropdown-content {display: block;}

非常感谢

Answer 1

请查看this小提琴链接以获取答案。

我正在使用margin来对齐中心的导航栏项目。

Answer 2

这里最简单的方法是将 ul li 和 ul li a 行高设置为90px（作为ul高度），并将padding-top和bottom设置为0。

li { float: left; line-height: 90px; }
li a, .dropbtn {
     display: inline-block;
     color: black;
     text-align: center;
     padding: 0px 16px;
     text-decoration: none;
}

但现在您的下拉列表已被破坏。我们通过设置 .dropdown-content 链接的行高和高度来修复它：

.dropdown-content a {
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
     line-height: normal;
     height: auto;
}

现在它看起来很好，但你的图像没有正确对齐。首先，我们需要为列表元素设置 display：inline-block 。

li { float: left; line-height: 90px; display: inline-block; }

然后为图片添加 vertical-align：middle

li img { vertical-align: middle; }

您想知道的最后一件事是在第一个元素上不必要的悬停。请记住，您可以使用nth-child，first-child，first-of-type与not selector结合来计算元素。添加行：

li:first-child a:hover { background: none; }

现在一切都应该像你想要的那样工作。无论如何，未来的提示很少。

不要害怕使用div。当您需要在网站上设置样式和控制元素时，它会有所帮助。它只不过是一个容器。
保持CSS清洁。这是层叠样式表。您已经使用了CSS li a 样式，并且在此 li a，.dropbtn 样式之后覆盖了之前的样式。

不要放弃和学习。 ;）

水平导航栏CSS - 中心徽标和文本

2 个答案: