将导航菜单与徽标对齐答案

【问题标题】：Aligning a Navigation Menu with a logo将导航菜单与徽标对齐
【发布时间】：2017-06-21 19:30:21
【问题描述】：

我可能对基本的 CSS 有一些理解上的问题，但是，即使通过查看其他线程，我也无法摆脱这个问题。我已经意识到垂直对齐只适用于内联元素，这很好。但是，当我实际尝试将菜单垂直对齐到其徽标的左侧时，就会出现一些问题。我仍然认为这个问题是由浮动元素和位置属性引起的，这对我来说是一个巨大的理解问题，但我希望有人能帮助我处理这个问题，因为它开始有点烦人了。

HTML：

<body>
<div id="container">
  <div id="logo">
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png"
  </div>
  <div id="nav-container">
    <ul id="navbar">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
   </div>

  </div>
</body>

CSS：

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  width: 750px;
  float: right;
  border:1px black dashed;
  height: 200px;
}
ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
}
ul#navbar > li {
  display: inline;
  vertical-align: bottom;
}
ul#navbar > li > a {
  padding: 5px;
  display: block;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  float: left;
  border-right: 1px black solid;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}

我的笔： http://codepen.io/Rej/pen/egKYEa

【问题讨论】：

您要将徽标与菜单项对齐还是与容器#nav-container对齐？

标签： css alignment css-float vertical-alignment

【解决方案1】：

首先需要对 HTML 和 CSS 进行一些修改

1- 图像标签img 未关闭等缺少/>

2-需要在导航中浮动的元素是lis 而不是as 所以我在css中改变了它。

3- logo 容器是div 标签，它是内联标签，所以我添加了display:inline-block

4- 徽标图像包含空白区域，因此不适合测试我通过 placeholder 替换它

5- 要对齐菜单，您可以使用 sudo 元素 after 和 vertical-align:middle

查看下面的演示

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  width: 750px;
  float: right;
  border:1px black dashed;
  height: 200px;
}
ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
}
ul#navbar:after{
  content:'';
  display:table;
  clear:both;
}
ul#navbar > li {
  display: inline;
  vertical-align: bottom;
  float: left;
  
}
ul#navbar > li > a {
  padding: 5px;
  display: block;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  border-right: 1px black solid;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}
#logo{
  display:inline-block;
}
div#nav-container:after {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<body>
  <div id="container">
    <div id="logo">
      <img src="https://placehold.it/200x200"/>
    </div>
    <div id="nav-container">
      <ul id="navbar">
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
  </div>
 
      </div>
</body>

如果我误解了您的问题，请留下反馈

【讨论】：

好吧，我不知道占位符的事情，但我想多亏了你，我发现了一个新东西！无论如何，我已经运行了您提供给我的代码 sn-p，但我认为我的解释可能有点误导。我实际上要求菜单本身与徽标垂直对齐。即带有 200 像素高度徽标的 200 像素标题。我的菜单应该在徽标基线和徽标上线之间的中间高度。我只是真的不知道如何实现这一目标。
这正是我想要的！但是content: ' '; 在这种情况下实际上做了什么？我的意思是，那个空的地方是干什么用的？
sudo 元素应该具有content 属性，以便在我们不想要某些内容的情况下呈现在页面上，只需在值中放入一个空字符串而不是空格 content:'';跨度>

【解决方案2】：

希望对您有所帮助，我实际上将图像位置更改为您想要的列表之后以下是一些适合您的代码需求的 CSS：

body {
  margin: 0;
  padding; 0;
}
#container {
  margin: auto;
  width: 960px;
}
#nav-container {
  margin: 0;
  float: left;
  border:1px black dashed;
  height: 200px;
}

ul#navbar {
  margin: 20px;
  padding: 0;
  list-style: none;
}
ul#navbar > li {

  vertical-align: bottom;
}
ul#navbar > li > a {
  padding: 5px;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
  float: left;
}
ul#navbar > li > a:hover {
  background-color: RoyalBlue;
}
ul#navbar > li > a > p{
  vertical-align: bottom;
}

而且你有一些 html 问题，所以在纠正它们之后它看起来像：

<div id="container">

  <div id="nav-container">
    <ul id="navbar">
      <li><a href="#">One</a></li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
     </ul>
   </div>
     <div id="logo">
    <img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">
  </div>

  </div>

【讨论】：

那不是我的要求！我实际上喜欢元素本身的位置！我只需要菜单与标题正确垂直对齐