기본적으로 세로로 정렬되는 인라인 블록

Question

웹 사이트 하단에 소셜 미디어 바를 만들고 있는데 모든 소셜 미디어 아이콘이 가로로 정렬되어 있어야합니다. 나에게는 소셜 미디어 아이콘 div를 포함하는 상위 div가 있습니다. 나는 페이지에서 상위 div를 중심에 두는 것뿐만 아니라 해당 div 내의 모든 소셜 미디어 아이콘을 중심에두고 있습니다.

인라인 블록 태그를 사용하면 모든 소셜 미디어 아이콘이 상위 div의 중간에 세로로 정렬됩니다. 나는 또한 그것들을 떠 다니려고했지만 그 형식으로 그들을 중심에 두는 방법을 알아낼 수 없다.

도움을 주시면 감사하겠습니다.

HTML :

<div id="socialcontainer"> 
    <div class="facebook"><a href="https://facebook.com/"></a></div> 
    <div class="twitter"><a href="https://twitter.com/"></a></div> 
    <div class="google"><a href="https://google.com/"></a></div> 
    <div class="linkedin"><a href="https://linkedin.com/"></a></div> 
</div> 

CSS :

#socialcontainer { 
width: 100%; 
margin: 0px auto; 
text-align: center; 
} 


.facebook a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/facebook_dark.png'); 
} 

.facebook a:hover { 
background: url('../img/socialicons/facebook_active.png'); 
} 

.twitter a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/twitter_dark.png'); 
} 


.twitter a:hover { 
    background: url('../img/socialicons/twitter_active.png'); 
} 

.google a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/google_dark.png'); 
}  

.google a:hover { 
    background: url('../img/socialicons/google_active.png'); 
} 

.linkedin a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/in_dark.png'); 
} 

.linkedin a:hover { 
    background: url('../img/socialicons/in_active.png'); 
} 

당신은 아래와 같이는 A 태그를 묶으 DIV 태그에 inline-block 할당해야

Answer 1

:

#socialcontainer > div{ display: inline-block;}

을

Answer 2

시도해보기 이 내용은 각 봉투의 CSS에 <div> 속성을 추가합니다 (display:inline).

Answer 3

, 당신의 HTML로

#socialcontainer { 
position: relative; 
width: 256px; // 64 * 4 
left: 50%; 
margin: 0px auto; 
margin-left: -128px; 
text-align: center; 
} 

.facebook, .twitter, .google, .linkedin { width: 64px; float: left; } 

.facebook a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/facebook_dark.png'); 
} 

.facebook a:hover { 
background: url('../img/socialicons/facebook_active.png'); 
} 

.twitter a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/twitter_dark.png'); 
} 


.twitter a:hover { 
    background: url('../img/socialicons/twitter_active.png'); 
} 

.google a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/google_dark.png'); 
}  

.google a:hover { 
    background: url('../img/socialicons/google_active.png'); 
} 

.linkedin a { 
height:64px; 
width:64px; 
display: inline-block; 
background: url('../img/socialicons/in_dark.png'); 
} 

.linkedin a:hover { 
    background: url('../img/socialicons/in_active.png'); 
} 

Answer 4

을이 수정 CSS를 시도하십시오 나는 수평 내가 생각하는 당신이 중심에 내부 콘텐츠 원하는 위치를 제어하는 ​​용기 내부의 새로운 사업부를 만들 필요가 있다고 생각 가장 쉬운 해결책은 내 JS 빈 여기

이 근무 code for the solution i propose