Центрировать блок изображений с помощью CSS
Используя блочную модель, я создал сетку изображений 3 на 3. Я хотел, чтобы все изображения были центрированы, поэтому я обернул все изображения в div и установил padding-left на 10%. Это сработало, но я предполагаю, что это был неправильный способ сделать это, поэтому я прошу кого-нибудь сказать мне, что я должен был сделать вместо этого. HTML и CSS ниже…
img {
width: 30%;
float: left;
margin: 0.1%;
max-width: 700px;
}
.block {
padding-left:10%;
}<div class = "block">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
<img src = "placeholder.png">
</div>
Ответы 5
Поправьте меня, если я ошибаюсь, но это могло бы стать центром блока, не так ли? Просто добавьте к этому отступ ...?
.block {
margin-left: auto;
margin-right: auto;
}
Вы, вероятно, захотите использовать сетку CSS для этого типа вещей. Ваш CSS будет выглядеть примерно так для сетки 3x3:
.block {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
Вот рабочий пример
Если вы хотите узнать больше о css-сетках, есть также множество руководств. Если вы не знаете, с чего начать, Вот этот очень вам поможет.
Вы можете добиться этого, используя следующий CSS:
.block {
font-size: 0;
text-align: center;
margin: 0 auto;
}
img {
display: inline-block;
width: 30%;
max-width: 700px;
vertical-align: center;
margin: 0.1%;
}
.block {
float: none;
margin: 0 auto;
}
Привет, @Wiki Babu, добро пожаловать в Stack Overflow! Хотя ваш ответ правильный, рекомендуется добавить объяснение, почему ваше решение должно работать. Цель состоит в том, чтобы помочь другим узнать Почему ответ работает. Для получения дополнительной информации прочтите Как ответить.
обновите свой css вот так
block{
display:flex;
flex-wrap:wrap;
}
block img{
width:33.33%;
}
Это не то, что хотел OP, а скорее помещает все изображения в одну строку: jsfiddle.net/b0orL9hm/15
просто нужно добавить свойство flex-wrap:wrap;
Нет, это не работает .. Я сделал то, что вы сказали, и добавил отступ, но ничего не изменилось, он остался в центре из-за заполнения, я думаю?