div中导航的垂直对齐答案

【问题标题】：Vertical alignment of a nav within a divdiv中导航的垂直对齐
【发布时间】：2017-04-17 17:58:02
【问题描述】：

我想创建一个导航栏，它在其父 div 中垂直对齐。这是我的代码：

div#banner {
  background-color: green;
  height: 100px;
}

div#title {
  float: left;
  width: 300px;
  color: white;
  font-size: 20px;
}

nav#menu {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
  margin: 0px font-size: 20px;
  text-align: center;
}

nav#menu ul {
  background-color: red;
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline;
}

nav#menu ul li {
  padding: 0px;
  margin: 0px;
  display: inline;
  vertical-align: middle;
}

nav#menu ul li a {
  padding: 0px;
  margin: 0px;
  width: 60px;
  display: inline-block;
  color: white;
}

<div id="banner">

  <div id="title">
    <h1>The Title</h1>
  </div>

  <nav id="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</div>

为了尝试使“菜单”在“标题”内垂直对齐，我给出了“菜单”“display: inline-block”和“vertial-align: middle”。

但是，菜单显示在周围 div 的顶部，而不是中间。

我应该改变什么？

【问题讨论】：

标签： html css

【解决方案1】：

最好的方式和现代方式是使用 flex ，对于 div#banner 添加：显示：弹性；对齐项目：居中；

div#banner {
  background-color: green;
  height: 100px;
  display:flex;
  align-items:center;
}

div#title {
  float: left;
  width: 300px;
  color: white;
  font-size: 20px;
}

nav#menu {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
  margin: 0px font-size: 20px;
  text-align: center;
}

nav#menu ul {
  background-color: red;
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline;
}

nav#menu ul li {
  padding: 0px;
  margin: 0px;
  display: inline;
  vertical-align: middle;
}

nav#menu ul li a {
  padding: 0px;
  margin: 0px;
  width: 60px;
  display: inline-block;
  color: white;
}

<div id="banner">

  <div id="title">
    <h1>The Title</h1>
  </div>

  <nav id="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</div>

【讨论】：

【解决方案2】：

只需添加几行，将其更改为 flexbox 布局。这样您就可以更好地控制导航的大小和位置。

div#banner {
  background-color: green;
  height: 100px;
  display: flex; <- this
  align-items: center; <- and this
}

div#title {
  float: left;
  width: 300px;
  color: white;
  font-size: 20px;
}

nav#menu {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
  margin: 0px font-size: 20px;
  text-align: center;
}

nav#menu ul {
  background-color: red;
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline;
}

nav#menu ul li {
  padding: 0px;
  margin: 0px;
  display: inline;
  vertical-align: middle;
}

nav#menu ul li a {
  padding: 0px;
  margin: 0px;
  width: 60px;
  display: inline-block;
  color: white;
}

<div id="banner">

  <div id="title">
    <h1>The Title</h1>
  </div>

  <nav id="menu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

</div>

【讨论】：

【解决方案3】：

用这个编辑你的 CSS：

div#banner {
  background-color: green;
  height: 100px;
  display: flex;
  align-items: center;
}

div#title {
  float: left;
  width: 300px;
  color: white;
  font-size: 20px;
}

nav#menu {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
  margin: 0px font-size: 20px;
  text-align: center;
}

nav#menu ul {
  background-color: red;
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline;
}

nav#menu ul li {
  padding: 0px;
  margin: 0px;
  display: inline;
  vertical-align: middle;
}

nav#menu ul li a {
  padding: 0px;
  margin: 0px;
  width: 60px;
  display: inline-block;
  color: white;
}

【讨论】：

【解决方案4】：

将以下行添加到 nav#menu：

nav#menu {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

【讨论】：