本文介绍了垂直导航栏/侧栏对齐元素居中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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



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

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

检查。

解决方案

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



确定试试这个




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

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

08-31 04:27