Центр неизвестный (отзывчивый) количество изображений, которые плавают

-1

Я создаю список сотрудников, их фотографии в формате сетки (5 в ширину). Поскольку число сотрудников колеблется, мне нужно иметь возможность центрировать элементы с плавающей точкой, которые не заполняют целую строку, без использования содержащего div для каждой строки. Я действительно чувствую, что маловероятно, что я первый, кто захочет это сделать, и борется, но каждое найденное мной решение - создать контейнер, или некоторые предлагают решение inline-block, однако эти изображения должны быть скрыты, и как они % width на некоторых браузерах некоторое пространство может быть видимым между ними, даже с решением margin-right: -4px; поэтому я в зависимости от поплавков. Благодаря!Центр неизвестный (отзывчивый) количество изображений, которые плавают

То, что я

http://pasteboard.co/1u9iCIRy.jpg

То, что я хочу

http://pasteboard.co/1u9lKgCh.jpg

источник

2016-06-06 Nathan Gilford

Если вы не хотите, чтобы пространство между ними, просто дать свой родительский контейнер 'размер шрифта: 0;' 'при использовании инлайн-block' для изображений. – connexo

Нам нужно знать ваш код, чтобы ответить с какой-либо точностью. –

@connexo о, вы правы! Я думал, что это «font-size» в фактическом элементе, а не в родительском. Что это за этикет для глупых вопросов, на которые они отвечают? Я прошу его удалить или попросить вас ответить, поэтому я могу отметить его правильно? –

Если вы не хотите пространства между ними, просто дайте их родительский контейнер font-size: 0; text-align: center; при использовании inline-block для изображений.

.imagecontainer { 
 
    font-size: 0; 
 
    text-align: center; 
 
} 
 

 
.imagecontainer img { 
 
    display: inline-block; 
 
}

<div class="imagecontainer"> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
    <img src="http://placehold.it/200x300" alt="" /> 
 
</div>

http://codepen.io/anon/pen/LZpGbZ

источник

2016-06-06 17:48:44 connexo

Вы можете использовать flexbox и justify-content: center. И фиксированный width гибкого контейнера.

Вот доказательство концепции для фиксированной 5-колоночной раскладки: http://jsbin.com/hegogigiyo/1/edit?html,css,output.

Вы можете увидеть расположение 10 изображений, 11 изображений ... 15 изображений.

источник

2016-06-06 17:40:46 alesc

Центр неизвестный (отзывчивый) количество изображений, которые плавают

ответ

Смежные вопросы