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

【问题标题】：Center Buttons with Icons in a Sidebar侧边栏中带有图标的中心按钮
【发布时间】：2018-05-26 19:46:36
【问题描述】：

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

我的目标是让 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>

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

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

【问题讨论】：

您的 CodePen 示例似乎已经在侧边栏中垂直显示了五个按钮。您能否清楚说明您的示例与您要实现的示例有何不同？你只是想让它们在页面中间垂直对齐吗？
完全正确。我希望它们在侧边栏的中间对齐

标签： html css vertical-alignment centering sidebar

【解决方案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>

希望这会有所帮助！ :)

【讨论】：

完美运行！非常感谢:)
没问题；很高兴这就是你要找的:)

【解决方案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>

【讨论】：

【解决方案3】：

我也会推荐 flexbox： http://flexboxfroggy.com/

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

【讨论】：