中心按钮与侧边栏中的图标

Question

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

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

的index.html

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;
                  }

的style.css

import {MatTableModule} from '@angular/material/table';

有人可以解释一下，我想找什么样的造型？ 我找不到任何有用的线索或指南。

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>

希望这有帮助！ ：）

Answer 2

我轻微改变了你的CSS - 诀窍是将ul垂直居中在页面中，然后将其偏移以使其居中。我还为ul li添加了一些填充，以便它们间隔一点。

    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 {
        position: fixed;
        top: 50%;
        left: 3%;
        transform: translate(-50%, -50%);
        transform: -webkit-translate(-50%, -50%);
        transform: -moz-translate(-50%, -50%);
        transform: -ms-translate(-50%, -50%);  
        text-align:center
    }
    
    .Sidebar-Icon .SDIcon {
    	  color: #fff;
      }
    .Sidebar-Icon li {
      list-style-type: none;
      padding-bottom: 10px 
    }

<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>

Answer 3

我还建议使用flexbox： http://flexboxfroggy.com/

这是一个向您展示flexbox命令的网站。这将是一个精心投入的1/2小时的时间。除了当前的任务，您还可以将它用于将来的任务。