소셜 미디어 아이콘, div의 중심에 있지 않음

Question

이유는 모르겠지만, 패딩 왼쪽을 사용하지 않고 페이지 중앙에 아이콘을 표시 할 수 없습니다 : 130px;

브라우저 창 크기를 조정할 때 아이콘이 제대로 중앙에 있지 않기 때문에 이상적이지는 않습니다. 어쩌면 커피가 더 필요할지 모르지만 오늘 아침 스태커 도움을받을 수 있습니다!

http://towerdive.net/

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 필요하면 알려주세요!

Answer 1

디스플레이에 인라인 블록을 사용할 수 있습니다. 다음과 같이 작성하십시오 :

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

Answer 2

현재 탐색 목록을 수평으로 표시하려면 부동을 사용하십시오. 수레가 있기 때문에 정렬되지 않은 목록의 중간에 목록 항목을 정렬 할 수 없습니다.

다른 기술은 float: left; 대신 display: inline-block;을 사용합니다. 목록 항목은 가로로 표시되지만 추가로 모든 공백이 고려됩니다. 항목 사이에 여백이 추가됩니다 (예 : 4 픽셀). 이제 UL에서 text-align: center;을 사용하여 목록 항목을 가운데에 맞출 수 있습니다. http://css-tricks.com/fighting-the-space-between-inline-block-elements/