html - 侧边栏中带有图标的中心按钮

Question

我正在尝试创建一个类似于此的网站仪表板

我的目标是让 5 个带有图标的按钮像示例中那样在侧边栏中间对齐。我已经看到一个帖子已经与我的问题相似，但它似乎并没有解决我的问题。这是 Thread 有类似的问题。我创建了一个 CodePen使用我的基本布局。

Index.html

<div class="Sidebar">
  <ul class="Sidebar-Icon">    
   <li><a href="javascript:void(0)" <i class="fa fa-home SDIcon" aria-hidden="true"></i></a></li>
   <li><a href="javascript:void(0)" <i class="fa fa-square-o SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-cloud SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-circle-o SDIcon" aria-hidden="true"></i></a></li>
  <li><a href="javascript:void(0)" <i class="fa fa-heart-o SDIcon" aria-hidden="true"></i></a></li>
 </ul>
</div> 

样式.css

html {
      position: relative;
      min-height: 100%;
}
.Sidebar {
          position: fixed;
          background-color: #15191C;
          width: 90px;
          top: 0;
          left: 0;
          bottom: 0;
          overflow-y: auto;
          z-index: 999;
          -webkit-transition: left 300ms;
          -o-transition: left 300ms;
          transition: left 300ms;
         }
 .Sidebar-Icon .SDIcon {
                        color: #fff;
                       }
 .Sidebar-Icon li {
                   list-style-type: none;
                  }

有人可以向我解释一下我在寻找什么样的造型吗？我找不到任何有用的线程或指南。

Answer 1

为了使侧边栏元素垂直居中，我建议使用 flexbox 布局。

您所要做的就是添加 display: flex 和 align-items: center 到您的 .Sidebar 类。

这可以从以下方面看出:

html {
  position: relative;
  min-height: 100%;
}

.Sidebar {
  position: fixed;
  background-color: #15191C;
  width: 90px;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 999;
  -webkit-transition: left 300ms;
  -o-transition: left 300ms;
  transition: left 300ms;
  display: flex;
  align-items: center;
}

.Sidebar-Icon .SDIcon {
  color: #fff;
}

.Sidebar-Icon li {
  list-style-type: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="Sidebar">
  <ul class="Sidebar-Icon">
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-home SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-square-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-cloud SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-circle-o SDIcon" aria-hidden="true"></i></a>
    </li>
    <li>
      <a href="javascript:void(0)"> <i class="fa fa-heart-o SDIcon" aria-hidden="true"></i></a>
    </li>
  </ul>
</div>

希望对您有所帮助! :)