Центрирование строки встроенных изображений

Question

У меня есть четыре значка, которые я установил для отображения встроенных строк, и теперь я пытаюсь центрировать список, в котором они содержатся внутри div.

Вот HTML:

<div id="social_media"> 
    <ul> 
      <li><a href="http://wwww.facebook.com"><img src="../images/social_media_icons/facebook_icon.png"></a></li> 
      <li><a href="http://wwww.wikia.com"><img src="../images/social_media_icons/wikia_icon.png"></a></li> 
      <li><a href="#"><img src="../images/social_media_icons/rss_icon.png"></a></li> 
      <li><a href="#"><img src="../images/social_media_icons/mail_icon.png"></a></li> 
    </ul> 
</div> 

И CSS:

#social_media 
{ 
    width:220px; 
    margin:10px auto; 
    padding:0 2px; 
} 

#social_media ul li 
{ 
    display:inline; 
    margin:0 3px; 
    list-style-type:none; 
} 

Четыре иконы 48px площади в общей сложности 192px в ширину, и имеет горизонтальную маржу 3px для другого 24px широкого , добавив, что весь список имеет ширину 216 пикселей. В div они содержатся в (social_media) - 220px в ширину с 2px горизонтального дополнения для 216px пространства, в котором список, теоретически, должен идеально вписываться.

Однако, когда я на самом деле это делаю, четвертая иконка попадает в следующую строку, непосредственно под первой. Когда я изменяю 3px на auto, они все вписываются в одну строку, но слишком близко друг к другу. И независимо от того, что я делаю, список выравнивается слева, а не центром, где он должен быть.

Помощь?

Answer 1

Учитывая CSS вы вывесили, вы может забыли о дефолте padding на ul элемента. В большинстве браузеров это 40px. Однако, сбросив это значение, не решает всю проблему, так как реальная проблема заключается в том, что элементы inline уважают пробелы в разметке и генерируют ~2px пробелов при наличии. Это корень проблемы; поэтому я хотел бы взглянуть на this answer, в котором конкретно рассматривается этот вопрос.

Учитывая, что текст не используется, вы можете установить font-size:0 на родительский элемент ul, удалив это пространство. Предполагая, что на самом деле есть текст, вы просто укажете новый дочерний элемент font-size.

EXAMPLE HERE

#social_media ul { 
    padding:0; 
    font-size:0; 
} 

В качестве альтернативы, лучший подход будет фактически удалить пробелы из разметки. Взгляните на разметку в this example.

Answer 2

Попробуйте

#social_media ul li img { 
    padding: 3px; 
}