垂直居中Side Navbar

guys。我很新来CSS，这是我第一次尝试创建一个垂直的导航栏。在得知我需要用我的<li>的-40余量将文本居中放置后，我得到了下一个挑战。我不明白它的中心垂直文本。也许有人可以帮我:-)垂直居中Side Navbar

body { 
 
    font-family: Lato; 
 
} 
 

 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: -8px; 
 
    background-color: grey; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0 0 0 -40; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-weight: bold; 
 
    
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    <title>Webdesign</title> 
 
</head> 
 
    
 
<body> 
 
    <ul class="nav"> 
 
    <li><a href="#">START</a></li> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</body> 
 

 

 
</html>

来源

2016-11-25 Neverland

欢迎来到Stack Overflow！请查看我们的[SO问题清单]（http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist）来帮助你提出一个好问题，从而得到一个很好的答案。 –

几件事情：

.nav li { 
list-style: none; 
text-align: center; 
margin: 0 0 0 -40; // You forgot to define a unit, so it won't work. (40 what ? px, em, rem, %...) 
}

我建议你重新设置margin和padding * {margin:0; padding:0;}，因为你加了保证金贵丽以平衡这个填充。

.nav {height:100%;}如果所有父母（html，body等）没有定义合适的高度，则不起作用。

可以实现不同的方式垂直对齐，一个是：

*{padding:0; margin:0;} 
 
html, body {height:100%;} 
 
body { 
 
    font-family: Lato; 
 
    vertical-align:middle; 
 
} 
 
div { 
 
    display:table; 
 
    height:100%; 
 
} 
 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    background-color: grey; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
.nav li { 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    font-weight: bold; 
 
    
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<body> 
 
    <div> 
 
    <ul class="nav"> 
 
     <li><a href="#">START</a></li> 
 
     <li><a href="#">HOME</a></li> 
 
     <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
    </div> 
 
</body>

我所做的是：

添加一个div包裹UL
加了个高度：100％;到html，body和那个div
增加了display：table;到该分区
增加显示：table-cell;垂直对齐：中部;到你的.nav

来源

2016-11-25 21:18:43 Kangouroops

感谢您的帮助，并感谢您的理解。XOXO – Neverland

如果有帮助，我很高兴。 ;） – Kangouroops

这样的事情？

body { 
 
    font-family: Lato; 
 
} 
 

 
.nav { 
 
    width: 300px; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background-color: grey; 
 
    text-align: center; 
 
} 
 

 
.nav li { 
 
    display: block; 
 
    list-style: none; 
 
} 
 

 
.nav li a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: black; 
 
    font-weight: bold; 
 
    display: block; 
 
} 
 

 
.nav li a:hover { 
 
    color: white; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="style.css" rel="stylesheet" type="text/css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 
    <title>Webdesign</title> 
 
</head> 
 
    
 
<body> 
 
    <ul class="nav"> 
 
    <li><a href="#">START</a></li> 
 
    <li><a href="#">HOME</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</body> 
 

 

 
</html>

来源

2016-11-25 21:50:40 Maximilian

不幸的是，但谢谢你的答案。我将导航栏设置为100％的高度，以使用侧边导航栏显示整个屏幕。而且我希望文本以100％“显示”高度为中心。 – Neverland

小菜一碟！只需应用以下规则：

.nav { 
    padding: 0; 
}

并且不使用任何负边距。希望可以帮助你:-)

来源

2016-11-25 22:33:05

您可以使用Flexbox的您添加到所谓的在你的代码.nav

display: flex; 
justify-content: center; 
align-items: center; 
flex-direction: column;

和子元素（LI）

flex-wrap: wrap-reverse; 
align-self: center;

可以Flexbox的父母UL保证你的产品将在100％垂直使用中：

justify-content: center;

来源

2016-11-25 22:57:41

垂直居中Side Navbar

回答

相关问题