Vertical Navbar/Sidebar align elements centered

问题

I am trying to build a sidebar with centered vertical elements like this design:

I couldn't figure it out after 2 hours so I decided to ask you guys if somebody could help me since I can't find any good links that can provide helpful information.

I think I am doing something wrong in the following 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;
}

Check JsFiddle.

回答1:

First the a href must be inside the li element..

use 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 try this

with more elements

来源：https://stackoverflow.com/questions/43709339/vertical-navbar-sidebar-align-elements-centered

标签

html