верстка блока с 3-мя карточками

220

09 ноября 2021, 15:50

дико прошу помощи :)
Ситуация такая, есть блок: Они должны находится в центре своего блока и картинки как бы тоже должны быть по центру относительно своего блока (чё он несет?), в общем говоря, у меня так не получается сделать, т.к опыта недостаточно, надеюсь на вашу помощь..)

Вот что вышло у меня: Код:

<div class="block_cards">
            <div class="card">
                <img src="images/device.png" alt="">
                <p>Optimized for all devices</p>
                <p>STRICT has been designed to be fully 
                responsive on all devices</p>
            </div>
            <div class="card">
                <img src="images/device.png" alt="">
                <p>Optimized for all devices</p>
                <p>STRICT has been designed to be fully 
                responsive on all devices</p>
            </div>
            <div class="card">
                <img src="images/device.png" alt="">
                <p>Optimized for all devices</p>
                <p>STRICT has been designed to be fully 
                responsive on all devices</p>
            </div>
        </div>

CSS:

.block_cards
{
    display: flex;
    justify-content: center;
    padding-top: 66px;
}
.block_cards img
{
}
.block_cards .card p
{
    width: 250px;
}

Answer 1

Попробуйте такие изменения в CSS:

.block_cards {
  display: flex;
  justify-content: space-between;
  padding-top: 66px;
  flex-wrap: nowrap;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250px;
  align-items: center;
  flex-wrap: nowrap;
}
.card__descriptor {
  text-align: center;
}

В HTML для тега P с описанием добавить класс "card__descriptor"
Пример собрал https://codepen.io/ilya-lokalin/pen/qBBQEKW