问如何在导航栏中垂直对齐列表
EN

Stack Overflow用户

提问于 2017-05-24 08:12:57

回答 1查看 35关注 0票数 1

例如：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>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-05-24 08:19:48

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44152680

复制

相似问题

问如何在导航栏中垂直对齐列表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在导航栏中垂直对齐列表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在导航栏中垂直对齐列表
EN