Question

是否可以在div的（垂直）中间显示菜单项？

我观看了10多个关于中心的视频，并查看了大约20个在线＆＃34;教程＆＃34;。每个人都使用jQuery / Bootstrap和内置类。我已经手工重新创建了每个效果，但是我无法将菜单项div放到中间。

HTML：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav>
    <h1 style="height: 75px; width: 200px; background: #f00;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>

</body>
</html>

CSS：

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
  z-index: 100;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

Answer 1

您如何看待这个？

https://jsfiddle.net/2zwxL14q/2/

StackOverflow直播示例：

nav {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 10px;
  position: fixed;
  text-align: right;
  background-color: #13293d;
  box-sizing: border-box;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
  display: block;
  text-align: center;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <nav>
    <h1 style="height: 75px; width: 200px; background: #f00; position: absolute;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>
</body>
</html>

Answer 2

给nav这个样式

display: flex;
justify-content: space-between;
align-items: center;

那么你nav将完全处于你期望的中间

nav {
  background-color: #13293d;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px;
  text-align: right;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav h1 {
  float: left;
}

#navelements ul {
  list-style: none;
}

#navelements ul li {
  display: inline-block;
}

#navelements ul li a {
  color: #fff;
  font-size: 1em;
  font-weight: 800;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}

 <nav>
    <h1 style="height: 75px; width: 200px; background: #f00;">
      <a href="/">
        LOGO
      </a>
    </h1>
    <div id="navelements">
      <ul>
        <li><a href="#">Home</a>
        <li><a href="#">About Us</a>
        <li><a href="#">Contact</a>
      </ul>
    </div>
  </nav>

在nav元素中垂直对齐div

2 个答案: