Question

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

＆＃13;

np

＆＃13;

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

＆＃13;

尝试制作＆＃34;菜单＆＃34;在＆＃34;标题＆＃34;中垂直对齐，我给了＆＃34;菜单＆＃34; ＆＃34; display：inline-block＆＃34;，＆＃34; vertial-align：middle＆＃34;。

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

我应该改变什么？

Answer 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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

将以下行添加到导航＃菜单：

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

div中导航的垂直对齐方式

4 个答案: