垂直 Navbar/Sidebar 居中对齐元素

Question

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

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

我认为我在以下方面做错了sidenav class:

.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

垂直 Navbar/Sidebar 居中对齐元素

Vertical Navbar/Sidebar align elements centered

html

css

sidebar

nav

twitter-bootstrap