Как равномерно выравнить иконки?

Question

[_с]

Всем привет! Как можно вот так выравнить иконки? Чтобы они равномерно были и нормально шли в ряд. Вот пример prntscr.com/dsdpyg спасибо!

Answer 1

[Ankhena]

Непонятно какая у вас структура тегов. Хорошо бы выложить сюда: https://jsfiddle.net

В общем случае: https://html5book.ru/css3-flexbox/
Альтернатива:
display:table
inline-block
background-position

Comments

[_с]

В ряд я их поставить могу, но почему-то фотографии разного размера, а нужно одинаковые. Причем из одного и тоже источника.

[_с]

https://html5book.ru/css3-flexbox/ тут об этом все рассказывается?

[Ankhena]

но почему-то фотографии разного размера,

Вот это не понятно.
Изначально они одинаковые?
Как они вставлены? Если img, то у него есть width и height. Если фоном, то background-size.
Ну либо изначально сделать их нужного размера.

[_с]

Ankhena W: просто я ставил, они одинаково размера были по данным, но как ставил сайт, где-то было шире, где-то ниже и т.д не пропорционально.

[_с]

Ankhena W: как сможете ответьте пожалуйста.

[Ankhena]

Георгий: на что ответить?

[Ankhena]

Георгий: Выложите код на jsfiddle, посмотрим, что там у вас

[Алмаз Бисенбаев]

Предлагаю почитать учебник по CSS для начинающих

[_с]

Алмаз Бисенбаев: Дело не в учебниках, я еще раз повторяю. Смотрите есть 5 фотографий, я задаю ширину авто, а высоту задаю значение. По факту размер есть, но сам размер фотографий другой. И они по разному отображаются. В ряд стоит правильно, но сами фотографии (иконки) разного размера. Причем параметры заданы.

[Ankhena]

Георгий:
Покажите ваш код! Услышьте меня! Нам не видно телератией!

[_с]

.saleoff:after {
display: table;
content: '';
clear: both;
}
.saleoff .sale {
width: 16%;
float: left;
text-align: center;
color: #666;
margin-right: 40px;
margin-left: 45px;
}

.saleoff .sale h3 {
font-weight: 700;
font-size: 15px;
line-height: 1.5;
width: 300px;
margin-left: -75px;
margin-top: -1px;
text-transform: uppercase;
}
.saleoff .sale h3 span {
font-weight: bold;
font-size: 14px;
}
.saleoff .sale img {
max-width: 100%;
width: auto;
height: 145px;
}

[Ankhena]

Георгий: я не могу продолжать беседу пока не будет рабосего кода на jsfiddle (ссылка выше в ответе) либо ссылки на сайт.

[Алмаз Бисенбаев]

Георгий: О аллах, зачем так делать

Answer 2

[Ilaj Osmanov]

Родителю дай :
display:flex;
align-items:center;

Answer 3

[Svidrigaylow]

display: inline-block или display: flex;

???