垂直導航欄/側邊欄對齊元素爲中心

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%; 
} 

Try this updated fiddle

OK試試這個

with more elements