水平导航栏 CSS - 中心标志和文本答案

【问题标题】：Horizontal Navigation Bar CSS - center logo and text水平导航栏 CSS - 中心标志和文本
【发布时间】：2016-09-02 01:33:22
【问题描述】：

我有一个导航栏，里面有一个徽标，我可以做到，但我无法正确对齐文本和图形。

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

请问有什么想法吗？我试图改变很多东西，但没有奏效。在我这里的代码中，我只放了一个其他的标志作为例子，我原来的标志很大。

我也不想在我的徽标中使用背景颜色，只在文本中使用。

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

非常感谢

【问题讨论】：

你是在没有任何框架的情况下这样做的吗？这是一个简单的 html 吗？
这是一个简单的html，我没有使用任何框架...我只是学习html和CSS代码，并且能够创建几个页面。

标签： css html alignment navigationbar

【解决方案1】：

这里最简单的方法是将 ul li 和 ul li a line-height 设置为 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: middle

li img { vertical-align: middle; }

您最不想知道的是将鼠标悬停在第一个元素上。请记住，您可以使用 nth-child、first-child、first-of-type 结合非选择器来计算元素。添加行：

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

现在一切都应该如您所愿。无论如何，对未来的一些提示。

不要害怕使用 div。当您需要在网站上设置样式和控制元素时，它会很有帮助。它只不过是一个容器。
保持 CSS 干净。它是层叠样式表。你的 CSS li a 样式和之后的 li a、.dropbtn 样式覆盖了之前的样式。

不要放弃，继续学习。 ;)

【讨论】：

非常感谢Kamil的一步一步，这太完美了！是的，我需要了解更多。我试图使用 boostrap，但我认为最好先改进我的基本 html 和 css 代码。
是的，如果您想了解引导程序等框架中发生的情况，请先了解基础知识。因为一切都会在适当的时候到来。
我注意到的一件事是，当我使用 Firefox 检查我的 html 页面时，徽标完全对齐，但是当我使用 chrome 或 internet explore 时，徽标没有对齐，这是意料之中的?
对不起，你是对的，我忘了在不同的浏览器上检查它。只需在 li 元素中删除 float: left; 即可：li { line-height: 90px; display: inline-block; } 使用 display: inline-block; 时不需要浮动
没有改变任何东西..使用 Internet Explorer 的标志质量很差，而且没有对齐。使用 chrome，徽标未在中心对齐。最好的选择是火狐...

【解决方案2】：

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

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

【讨论】：

只需为 about 和 help 链接添加 nav-item 类，然后就完成了。检查更新的小提琴link 是否相同。