我如何在我的顶部酒吧的字体图标的中心？

Question

我有几个字型可怕的图标包括在我的网站顶部栏链接到我的社交媒体简介。我希望这些图标直接在酒吧的中心(水平和垂直)。有小费吗？

CSS

.top-bar {
   background: #000000;
   padding-top: 0px;
   padding-bottom: 0px;
   font-weight: 300;
   font-size: 12px;
   min-height: 40px;
   line-height: 40px;
}

.top-bar .social {
   padding: 0px;
}

.top-bar .social a i {
   float: left;
   text-decoration: none;
   margin: 0px;
   line-height: 28px;
   padding: 10px;
   height: 40px;
   width: 40px;
   font-size: 16px;
   color: #FFFFFF;
}

.top-bar .social a:hover i {
   font-size: 16px;
   color: #FF0000;
}

<div class="top-bar">
   <div class="social">
      <a href="#"><i class="fa fa-tumblr"></i></a>
      <a href="#"><i class="fa fa-soundcloud"></i></a>
      <a href="#"><i class="fa fa-youtube"></i></a>
      <a href="#"><i class="fa fa-instagram"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
   </div>
</div>

Answer 1

，下面是：

.social a {
    display: inline-block;
}

.top-bar .social {
padding: 0px;
text-align: center;
    background: black;
}

.top-bar .social a i {
    text-decoration: none;
    margin: 0px;
    line-height: 28px;
    padding: 10px;
    width: 40px;
    font-size: 16px;
    color: #FFFFFF;
}

jsFiddle演示

Answer 2

在这种情况下，我喜欢使用flexbox。

试试这个：

.social {
  display: flex;
  align-items: center;
  justify-content: center;
}

Answer 3

将其添加到.social类中

 .top-bar .social {
   display: table;
   padding: 0px;
   margin-left: auto;
   margin-right:auto;   
 }

这将使您的图标与中心垂直和水平。

希望能帮上忙。