社交媒體圖標，不是集中在div內

不確定爲什麼，但我無法使用padding-left：130px;社交媒體圖標，不是集中在div內

這當然不理想，因爲當您重新調整瀏覽器窗口大小時，圖標不能正確居中。也許我需要更多的咖啡，但今天早上我可以使用一些堆垛機幫助！

HTML

<div id="center2"> 
    <div id="social_icons"> 
     <p> 
      Thanks for your interest in our blog! 
      You can also find us here, as well as subscribe to our newsletter: 
     </p> 
     <ul> 
      <li id="facebook"> 
       <a href="https://www.facebook.com/pages/Towerdive/497721103607131" title="Like us on Facebook"><img src="img/icon_facebook.png" alt="Facebook"/></a> 
      </li> 
      <li id="twitter"> 
       <a href="https://twitter.com/TowerDiveDotNet" title="Follow us on Twitter"><img src="img/icon_twitter.png" alt="Twitter"/></a> 
      </li> 
      <li id="newsletter"> 
       <a href="http://eepurl.com/uY5m9" title="Subscribe to our Newsletter"><img src="img/icon_newsletter.png" alt="Newsletter"/></a> 
      </li> 
     </ul> 
    </div> 
</div>

CSS

#center2 { 
    width: 100%; 
} 

#social_icons { 
    margin: 0 auto; 
    width: 400px; 
    height: 250px; 
    text-align: center; 
} 

#social_icons p { 
    color: #e3cda4; 
} 

#social_icons ul { 
    margin: 0 auto; 
    list-style: none; 
    text-align: center; 
} 

#social_icons ul li { 
    float: left; 
    padding-right: 10px; 
}

讓我知道，如果你們需要完整的HTML或CSS！

來源

2013-02-05 Leon Gaban

您可以使用顯示：inline-block爲此。寫像這樣：

#social_icons ul li { 
    display: inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
    vertical-align:top; 
    padding-right: 10px; 
}

來源

2013-02-05 17:07:52 sandeep

謝謝！就是這樣，這是很快hehe另一分鐘之前，我可以檢查你的答案... –

您目前使用浮動來水平顯示您的導航列表。由於浮點數，無法對齊無序列表中間的列表項。

另一種技術是使用display: inline-block;而不是float: left;。列表項目將水平顯示，但也會考慮所有額外的空白區域。你會得到額外的利潤（如4px）。現在，您可以在UL上使用text-align: center;將列表項目居中。

有由克里斯Coyier本文中介紹的幾個（容易）鍛鍊： http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2013-02-05 17:14:12 kleinfreund

感謝您的提示以及！ –

社交媒體圖標，不是集中在div內

回答

相關問題