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

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

Здесь HTML:

<div id="social_media">
 <ul>
 
 
 
 
 </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;
}

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

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

Помогите?

2 ответа

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

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

ПРИМЕР ЗДЕСЬ

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

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


Пытаться

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

licensed under cc by-sa 3.0 with attribution.