CSS 수평 정렬 문제

"#connect"라는 div가 있습니다. 그 안에는 표제가 있고 그 아래에 CSS 스프라이트가있는 다른 div가 있습니다.CSS 수평 정렬 문제

#connect div가 text-align : center로 설정된 경우에도 CSS 스프라이트를 제목 아래에 정렬하는 데 문제가 있습니다.

여기 내 HTML의 :

이

<div id="connect"> 
    Connect with us 
     <div id="social-icons"> 
      <a class="facebook" target="_blank" href="#"></a> 
      <a class="youtube" target="_blank" href="#"></a> 
      <a class="twitter" target="_blank" href="#"></a> 
      <a class="instagram" target="_blank" href="#"></a> 
     </div> 
</div>

여기 내 CSS의 :

div#connect{ 
    background-color:#EEEEEE; 
    text-align:center; 
    padding:40px 0; 
    font-weight:600; 
    text-transform:uppercase; 
    letter-spacing:0.0625em; 
    display:block; 
} 

div#social-icons{ 
    margin-bottom:50px; 
    display:block; 
} 

div#social-icons a { 
    background-image: url('http://s27.postimg.org/unv91ngq7/social_sprite.png'); 
    background-repeat: none; 
    width: 40px; 
    height: 40px; 
    float:left; 
    margin:5px; 
    transition: background-position .25s ease; 
    -webkit-transition: background-position .25s ease; 
    -moz-transition: background-position .25s ease; 
    -o-transition: background-position .25s ease; 
} 

div#social-icons a.facebook { 
    background-position: 0 0; 
} 

div#social-icons a:hover.facebook { 
    background-position: 0 40px; 
} 

div#social-icons a.youtube { 
    background-position: 120px 0; 
} 

div#social-icons a:hover.youtube { 
    background-position: 120px 40px; 
} 

div#social-icons a.twitter { 
    background-position: 80px 0; 
} 

div#social-icons a:hover.twitter { 
    background-position: 80px 40px; 
} 

div#social-icons a.instagram { 
    background-position: 40px 0; 
} 

div#social-icons a:hover.instagram { 
    background-position: 40px 40px; 
}

여기 내 바이올린이있다 : http://jsfiddle.net/gUUYc/2/

출처

2013-12-19 Eric Wood

당신은 당신의 아이콘 텍스트 정렬에 적용하려면 display:inline-block;이 필요합니다. 또한 줄 바꿈이 필요합니다.

http://jsfiddle.net/gUUYc/3/

출처

2013-12-19 21:50:54

완벽한. 감사! –

답을 올바르게 표시 할 수 있습니까? 감사합니다. –

4 분 정도 기다려야합니다. 그러나 나는 확신 할 것이다. –

이 간단한 해결책은 다음처럼 CSS의이 부분을 수정하는 것입니다 : 아래의 바이올린 참조

div#social-icons{ 
    margin:0 auto 50px auto; 
    display:block; 
    width:200px; 
}

자동으로 왼쪽 및 오른쪽 여백을 설정, 그리고 그들에게 세트를 제공 너비를 지정하면 부모 요소의 가운데에 배치됩니다.

http://jsfiddle.net/gUUYc/5/

출처

2013-12-19 21:57:14 Andrew

CSS 수평 정렬 문제

답변

관련 문제