如何在导航栏中垂直居中放置列表
[英]How to vertically center a list in a nav-bar
问题描述
例如在： 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>
1 个解决方案
解决方案1
2 已采纳 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>
如何使导航栏居中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.