html - 如何在顶部栏中将 Font Awesome 图标居中？

Question

我的网站顶部栏中包含一些 Font Awesome 图标，用于链接到我的社交媒体资料。我希望这些图标直接位于栏的中心(水平和垂直)。有什么建议吗？

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

HTML

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