div의 중심에 요소 배치

Question

어리석은 질문 일지 모르지만 주위를 둘러 볼 수는 없습니다. 창 크기를 조정 했더라도 끊어지지 않는 방식으로 요소 (소셜 미디어 아이콘)를 중앙에, 수평으로 배치하는 방법?

<div class="mob_social"> 
<p1>Your friends might want to fix their iPhones.</p1> 
<div class="mob_icon"> 
    <ul> 
     <li><a href="http://www.facebook.com/"> 
        <img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh"> 

       </a> 
     </li> 
<li><a href="https://www.instagram.com"> 
        <img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh"> 

       </a> 
     </li> 
<li><a href="https://www.twitter.com"> 
        <img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png" alt=" the three sayings like a slogan regenerate, refresh and renew" title="regenerate, renew and refresh"> 

       </a> 
     </li> 
    </ul> 
</div>  

난 항상 혼란이 질문을 주저 : 다음은 마크 업이다. 나는 그것이 어떻게 행해지는지 알고 싶다. 여기에 아이콘으로 만든 피들입니다. 목록에

http://jsfiddle.net/msLuzrye/

Answer 1

은 수평과 바이올린의 정렬 된 아이콘과 전체 컨테이너 div는 페이지 중앙에 위치합니다. 여기

http://jsfiddle.net/msLuzrye/5/

두 가지 트릭. <li> 요소를 inline-block으로 표시하고 CSS 변환을 사용하여 부모를 중심으로 <div> 가운데로 맞 춥니 다. 상위 div의 경우 absolute 및 top: 50%을 배치하면 div의 맨 위가 페이지 아래쪽에 배치됩니다. CSS 변환은 요소 자체에 상대적이므로 transform: translateY(-50%)은 요소를 자체 높이의 절반만큼 위로 끌어 올리면 수직 중심 맞춤이 완벽하게됩니다.

CSS 변환 here에 대한 브라우저 지원을 확인할 수 있습니다.

Answer 2

사용 display:inline-block : 현재 아이콘이 페이지의 중앙에 수평으로 배치하는 방법 그러나 수직 여기

li{ 
    display: inline-block; 
} 

your updated fiddle