Как расположить три картинки вряд с подписью снизу?

Question

Ума не приложу, как это сверстать:

Что бы я не делал, картинки либо встают колонками, либо встают вряд, но текст, который должен быть внизу, находится сбоку от картинок:

.features-block {
  position: relative;
  display: block;
  box-sizing: border-box;
  span {
    float: left;
  }
}

<div class="features-block">
  <div class="image">
    <span>
        <picture>
            <img src="img/main-features/1.png" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="img/main-features/2.png" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="img/main-features/3.png" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

Answer 1

Это достаточно просто сделать при помощи:

Grid

.image {
 display: grid;
 grid-template-columns: max-content max-content max-content;
 align-items: center;
 justify-content: space-around;
}

.features-block span {
  display: grid;
  justify-items: center;
}

.features-block span img {
  width: 30px;
  height: auto;
}

<div class="features-block">
  <div class="image">
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

или

Flex

.image {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.features-block span {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features-block span > picture {
  margin: auto;
}

.features-block span img {
  width: 30px;
  height: auto;
}

<div class="features-block">
  <div class="image">
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text</p>
        </span>
    <span>
        <picture>
            <img src="https://i.picsum.photos/id/796/200/200.jpg?hmac=TabKFVb5_IyNIu3LHpgEW6YnI0AxHo3G6fyHubk1OY8" alt="">
        </picture>
        <p>text text</p>
        </span>
  </div>
</div>

Answer 2

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

.image {
  display: flex;
  justify-content: space-around;
}

.image>span {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image>span>*:not(:last-child) {
  margin-bottom: 15px;
}

<div class="features-block">
  <div class="image">
    <span>
        <img src="https://picsum.photos/50/50" alt="">
        <p>text</p>
    </span>
    <span>
        <img src="https://picsum.photos/50/50" alt="">
        <p>text</p>
    </span>
    <span>
        <img src="https://picsum.photos/50/50" alt="">
        <p>text text</p>
    </span>
  </div>
</div>

БЛОГ НА HUSL

Как расположить три картинки вряд с подписью снизу?

Ответы (2 шт):