如何将顶部栏中的Font Awesome图标居中？

I have a few Font Awesome icons included in the top bar of my website for links to my social media profiles. I want these icons to be directly in the center of the bar (horizontally and vertically). Any tips?

我的网站顶部栏中包含一些Font Awesome图标，用于指向我的社交媒体配置文件的链接。我希望这些图标直接位于条形图的中心（水平和垂直）。有小费吗？

CSS

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

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>

4 个解决方案

#1

With this:

有了这个：

.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

jsFiddle演示

#2

I like using flexbox for this situation.

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

Try this:

尝试这个：

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

#3

      <!doctype html>
        <html lang="en">
        <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <style>
       .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 {
   text-decoration: none;
   margin: 0px;
   line-height: 35px;
   padding: 10px;
   height: 40px;
   width: 40px;
   font-size: 16px;
   color: #FFFFFF;
}

.top-bar .social a:hover i {
   font-size: 16px;
   color: #FF0000;
}
.social-nav{
      width: 320px;
      margin:0 auto;
}
.social-nav li {
  list-style:none;
  display:inline-block;
}
        </style>
        </head>
        <body>
        <div class="top-bar">
           <div class="social">
           <ul class="social-nav">
             <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
             <li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
             <li><a href="#"><i class="fa fa-youtube"></i></a></li>
             <li><a href="#"><i class="fa fa-instagram"></i></a></li>
             <li><a href="#"><i class="fa fa-twitter"></i></a></li>

           </ul>





           </div>
        </div>

        </body>
        </html>

jsFddle DEMO

#4

-4

Add this to your .social class

将其添加到.social类

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

that will align your icon to the center vertically and horizontally.

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

Hope it helps.

希望能帮助到你。

#1