Размещение элементов в центре 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