Маржа: авто для нескольких встроенных изображений

Question

Я работаю над этим дизайном, и я застрял на этом этапе. Вот моя упрощенная конструкция: jsFiddle

Как вы можете видеть, у меня есть несколько изображений внутри div. Что мне нужно сделать, чтобы заставить их выглядеть следующим образом:

Таким образом, они имеют авто поля между ними и границы.

Раствор для вертикального выравнивания будет иметь изображения на 50px высоте, так как #container ДИВ имеет фиксированную высоту, или использовать вспомогательный DIV с display: inline-block и vertical-align: middle свойствами, но я не знаю, что делать с горизонтальное выравнивание, так как оно не является фиксированной шириной.

Я пробовал display: block и margin: 0 auto, но это не сработает. Он больше не отображает изображения на одной строке. Есть идеи?

Answer 1

Вы можете сделать изображения встроенными блоками, а затем добавить text-align: center в контейнер. Тогда пространство изображения с некоторыми полями на них, как это:

#container { 
    width: 50%; 
    height: 50px; 
    display: block; 
    margin: auto; 
    border: 1px solid blue; 
    line-height: 50px; 
    text-align: center; 
} 

#container img{ 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    margin: 0 5%; 
} 

JSFiddle: http://jsfiddle.net/a0n8wm5k/2/

Answer 2

Использование text-align:center на материнской

JSfiddle Demo

CSS

*{ 
    margin: 0px; 
    padding: 0px; 
} 

body, html { 
    width: 100%; 
} 

#container { 
    width: 50%; 
    height: 50px; 
    display: block; 
    margin: auto; 
    border: 1px solid blue; 
    line-height: 50px; 
    text-align: center; 
} 

#container img{ 
    width: 30px; 
    height: 30px; 
    margin: 0 25px; 
    vertical-align: middle; 
} 

Answer 3

Поскольку контейнер имеет фиксированную высоту, почему бы не дать каждому img пробел/поле справа?

http://jsfiddle.net/4mk6s1d5/

#container img{ 
    width: 30px; 
    height: 30px; 
    padding-left: 20px; 
    vertical-align: middle; 
} 

Answer 4

Вы можете добавить запас налево в CSS, если вам нужно так же, как вы показали на изображении следует увеличить ширину контейнера, как

#container { 
width: 80%; 
height: 50px; 
display: block; 
margin: auto; 
border: 1px solid blue; 
line-height: 50px; 
} 

#container img{ 
margin-left:35px; 
width: 30px; 
height: 30px; 
} 

здесь является сценарий http://jsfiddle.net/a0n8wm5k/7/

Answer 5

Вы можете использовать это:

#container { 
    width: 50%; 
    height: 50px; 
    display: block; 
    margin: auto; 
    border: 1px solid blue; 
    line-height: 50px; 
    text-align: center;/*Add text align center*/ 
} 

#container img{ 
    width: 30px; 
    height: 30px; 
    vertical-align: middle;/*Add vertical align middle*/ 

} 
#container img:not(:first-child){ 
    margin-left: 50px;/*Add margin not in first image though*/ 
} 

fiddle

Answer 6

Вот мои 2 цента стоит, используя table-cell.

Обратите внимание, что я добавил родительский контейнер в центр table-cell. Ваш вопрос специфичен для изображений, поэтому я не думаю, что это проблема?

<div id="parent-container"> 
    <div id="container"> 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" /> 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" /> 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" /> 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQXxxJ8MNjZZV8-Zzwu_RfL6YnZSt8cY70fyQlgeJwg3H6dLW_m2A" /> 
    </div> 
</div> 

#parent-container { 
    display: table; 
    width: 50%; 
    margin: 0 auto; 
} 

#container { 
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
    height: 200px; 
    border: 1px solid blue; 
    text-align: center; 
} 

#container img { 
    display: inline-block; 
    width: 30px; 
} 

Я изменил высоту, чтобы показать, что это «жидкость», независимо от размера контейнера.Это должно работать в IE8 +, но не проверено.

http://jsfiddle.net/rvfvt01a/1/