Question

例如：http://codepen.io/SimpleRoger/pen/OmRKNq

我想把中心：项目，为什么我们和垂直联系;而不是在顶部。

header {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  background: #55d6aa;
}

.navcontainer {
  width: 97%;
  margin: 0 auto;
  background: #AAAAAA;
  position: relative;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

nav {
  float: right;
  /*background: #FFFF22;*/
  width: 30%;
  margin: 0;
  /*yellow*/
}

.title {
  /*background: #ffff33;
  /*white*/
  display: inline-block;
  margin: 0;
}

nav ul {
  list-style: none;
  margin: 0;
  /*background:#00ff00;  */
  /*green*/
}

nav li {
  /*background: #AE1234;
  /*red*/
  display: inline-block;
  margin-left: 10%;
  padding: 0;
}

nav a {
  color: #123;
  text-decoration: none;
  text-transform: upper-case;
  font-weight: 800;
}

nav a:hover {
  color: #FFFFFF;
}

<html>

<head>
  <title>Vertigo Web Design</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>
  <header>
    <div class="navcontainer clearfix">
      <h1 class="title">Vertigo Web Design</h1>
      <nav>
        <ul>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Why Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

Answer 1

将display: table;添加到.navcontainer并添加了

nav,.title {
  display: table-cell;
  vertical-align: middle;
}

header {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  background: #55d6aa;
}

.navcontainer {
  width: 97%;
  margin: 0 auto;
  background: #AAAAAA;
  position: relative;
  display: table;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

nav {
  /*background: #FFFF22;*/
  /*yellow*/
  width: 60%;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
}

.title {
  /*background: #ffff33;
  /*white*/
  margin: 0;
  display: table-cell;
  vertical-align: middle;
}

nav ul {
  list-style: none;
  margin: 0;
  /*background:#00ff00;  */
  /*green*/
}

nav li {
  /*background: #AE1234;
  /*red*/
  display: inline-block;
  margin-left: 10%;
  padding: 0;
}

nav a {
  color: #123;
  text-decoration: none;
  text-transform: upper-case;
  font-weight: 800;
}

nav a:hover {
  color: #FFFFFF;
}

<html>

<head>
  <title>Vertigo Web Design</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>

<body>
  <header>
    <div class="navcontainer clearfix">
      <h1 class="title">Vertigo Web Design</h1>
      <nav>
        <ul>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Why Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

</html>

如何在导航栏中垂直居中列表

1 个答案: