如何在顶部栏中将 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 class

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

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

希望对您有所帮助。

Answer 2

有了这个:

.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

Answer 3

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

试试这个：

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

Answer 4

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

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

How do I center the Font Awesome icons in my top bar?

html

css

font-awesome