0

UPD. Возможно ли сделать это как-то на bootstrap?

Такая проблема: у меня на сайте есть 3 иконки, их нужно всех выровнять в линию между собой. Сделал для каждой картинки контейнер с высотой самой большой картинки, поставил vertical-align: middle, не сработало. Пробовал и разные вариации выравнивания делать, и строчно-блочными divы сделать, все равно они "прилипают" к верху контейнера. Что делать? Может можно это как-то на js реализовать?введите сюда описание изображения Код на CodePen

<div class="row align-items-end">
            <div class="col-4">
                <div class="header-icon">
                    <div class="header-icon__div"><img src="img/header/icons/delievery.png" alt="delievery"></div>
                    Доставка по
                    РФ<br>
                    от 3-х дней
                </div>
            </div>
            <!-- /.col-4 -->
            <div class="col-4">
                <div class="header-icon">
                    <div class="header-icon__div"><img src="img/header/icons/new.png" alt="new">
                    </div>
                    Новое состояние<br>
                    по цене б/у
                </div>
            </div>
            <!-- /.col-4 -->
            <div class="col-4">
                <div class="header-icon">
                    <div class="header-icon__div"><img src="img/header/icons/list.png" alt="list">
                    </div>
                    Наличие более 500<br>
                    различных деталей
                </div>
            </div>
            <!-- /.col-4 -->
        </div>
        <!-- /.row -->
2
  • Можете ли выложить пример кода? Commented 20 дек. 2019 в 7:46
  • код
    – mr.yar
    Commented 20 дек. 2019 в 8:05

2 ответа 2

1

картинки на кодпене не подгружаются попробуй так:

.header-icon__div {
  min-height: 70px;
  display: flex;
  align-items: center;
}

1

Попробуйте flexbox с такими свойствами.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: flex-start;
  align-items: center;
}

.flex-item:nth-child(1) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

.flex-item:nth-child(2) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}

.flex-item:nth-child(3) {
  order: 0;
  flex: 0 1 auto;
  align-self: auto;
}
<div class="flex-container flex-container-style fixed-height">
  <div class="flex-item">
    <span contenteditable=""></span>
    <span class="counter">1</span>
  </div>
  <div class="flex-item">
    <span contenteditable=""></span>
    <span class="counter">2</span>
  </div>
  <div class="flex-item">
    <span contenteditable=""></span>
    <span class="counter">3</span>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.