垂直导航栏/侧栏对齐元素居中

Question

我正在尝试构建一个带有居中垂直元素的侧边栏，如此设计：

2小时后我无法理解，所以我决定问你们有人可以帮助我，因为我找不到任何可以提供有用信息的好链接。

我认为我在以下sidenav课程中做错了什么：

.sidenav {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #16191C;
    position: fixed;
    top: 0px;
    width: 150px;
    height: 100%;
    color: #e1ffff;
}

检查JsFiddle。

Answer 1

首先，a href必须位于li元素内..

使用flexbox。

ul {
 position: fixed; 
 z-index: 1;
 top: auto;
 bottom: auto;
 left: 0;
 /*right: 0;*/
 margin: auto;
 height: 100%;
 width: 100%;
 padding: 50px;
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:center;
}

ul li {
  display:block;
  width:100%;
}

Try this updated fiddle

好的，试试这个

with more elements