垂直Navbar / Sidebar對齊元素居中

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

首先，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%;
}

試試這個更新的小提琴

好試試看

具有更多元素