垂直导航栏/侧栏对齐元素居中 [英] Vertical Navbar/Sidebar align elements centered

问题描述

我正在尝试构建一个以此设计为中心的垂直元素的侧边栏：

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

我认为我在下面的 sidenav 类中做错了：

  .sidenav {
 overflow：auto; 
 font-family：verdana; 
 font-size：12px; 
 font-weight：200; 
背景颜色：＃16191C; 
位置：固定; 
 top：0px; 
 width：150px; 
身高：100％; 
颜色：＃e1ffff; 
} 
  

检查 JsFiddle 。

解决方案

首先href必须在里面元素..

使用flexbox。

  ul {
位置：固定; 
 z-index：1; 
 top：auto; 
 bottom：auto; 
剩下：0; 
 / * right：0; * / 
 margin：auto; 
身高：100％; 
宽度：100％; 
 padding：50px; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
 justify-content：center; 
} 
 
 ul li {
 display：block; 
宽度：100％; 
} 
  

试试这个更新的小提琴

确定试试这个

with more elements

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.

解决方案

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

这篇关于垂直导航栏/侧栏对齐元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！