Üst yazı çubuğumda Yazı Tipi Başarısı simgelerini nasıl ortalarım?

Sosyal medya profillerime bağlantılar için web sitemin en üst çubuğunda yer alan birkaç Font Awesome ikonum var. Bu simgelerin doğrudan çubuğun (yatay ve dikey) ortasında olmasını istiyorum. Herhangi bir ipucu?Üst yazı çubuğumda Yazı Tipi Başarısı simgelerini nasıl ortalarım?

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

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

AliG edeceğini

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

kaynak

2016-03-30 Austin

.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

kaynak

2016-03-30 01:27:32 Pedram

teşekkür ederiz! Bu işe yaradı! – Austin

-4

sizin .social sınıfa Bunu ekle n simgenizi merkeze dikey ve yatay olarak.

Yardım edin. Bununla

kaynak

2016-03-30 01:20:42 1901

Cevabınızın bana acıyor – DevBert

bu durum için flexbox kullanarak gibi.

bu deneyin:

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

kaynak

2016-03-30 01:27:36 Coleman

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

kaynak

2016-03-30 01:27:49

Üst yazı çubuğumda Yazı Tipi Başarısı simgelerini nasıl ortalarım?

cevap

İlgili konular