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

Question

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

我的目标是让 5 个带有图标的按钮像示例中那样在边栏中间对齐。我已经看到一个 post 已经与我的问题相似，但它似乎没有解决我的问题。这是有类似问题的。我用我的基本布局创建了一个 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>

style.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 along with align-items: center 添加到您的 .Sidebar class.

这可以在下面看到：

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 小时的宝贵时间。除了您当前的任务，您还可以将其用于未来的任务。

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

Center Buttons with Icons in a Sidebar

html

css

sidebar

vertical-alignment

centering