固定导航栏左侧的项目采用等高垂直对齐
固定导航栏左侧的项目采用等高垂直对齐
提问于 2017-06-11 07:34:40
我正在创建一个简单的左浮动固定垂直导航栏，它需要100%的视口高度，每个列表项应该具有相同的高度。我已经设法做到了这一切，但无法让列表项文本根据单个项的高度垂直居中对齐。请看我下面的代码。
html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
color: ghostwhite;
padding: 0;
margin: 0;
}
header {
width: 10%;
background: lightcoral;
}
.main-content {
width: 90%;
background: #25b99a;
box-sizing: border-box;
}
header, .main-content {
float: left;
height: 100vh;
}
header nav ul li {
list-style: none;
}
header nav ul li a {
text-decoration: none;
}
header nav ul li, header nav ul li a {
height: 33.33vh;
display: block;
color: ghostwhite;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="main-content">
<h1>Welcome to my website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus obcaecati cum rerum vel nesciunt ratione est! At rem totam sed maxime reprehenderit nihil quam mollitia dicta est laborum, possimus vero aspernatur commodi cum quia corporis earum porro, temporibus provident, veritatis.</p>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44479066
复制相关文章
相似问题
腾讯云开发者
