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

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

请检查此小提琴链接以获取答案。

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

Answer 2

这里最简单的方法是将ul li和ul li设置为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链接设置line-height和height来解决此问题，如下所示：

.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：中间为图像

li img { vertical-align: middle; }

您要了解的最后一件事是第一个元素上不需要的悬停。 请记住，可以将nth-child，first-child，first-of-type与not选择器结合使用来对元素进行计数。 添加行：

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

现在，一切都应按您希望的那样工作。 无论如何，关于未来的一些技巧。

不要害怕使用div。 当您需要样式和控制网站上的元素时，它会有所帮助。 无非就是一个容器。
保持CSS干净。 这是级联样式表。 在CSS li中有一种样式，在此之后，.dropbtn样式将覆盖前一个样式。

不要放弃并继续学习。 ;）

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

问题描述

2 个解决方案

解决方案1
0 2016-09-01 17:07:12

解决方案2
0 已采纳 2016-09-01 17:33:22

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

问题描述

2 个解决方案

解决方案1 0 2016-09-01 17:07:12

解决方案2 0 已采纳 2016-09-01 17:33:22

解决方案1
0 2016-09-01 17:07:12

解决方案2
0 已采纳 2016-09-01 17:33:22