Как разместить текст под изображениями, которые я выровнял по центру страницы?

Question

У меня есть следующие строки HTML и CSS, чтобы выровнять 3 изображения по центру страницы.
HTML:

<div class="row2">
  <div align="center;" class="icon">
    <img src="image/character.png" />
  </div>
  <div align="center;" class="icon">
    <img src="image/online.png" />
  </div>
  <div align="center;" class="icon">
    <img src="image/leaderboard.png" />
  </div>
</div>

CSS:

.row2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon {
    position: relative;
    display: inline-block;
    float: left;
    padding: 100px;
}

Я предположил, что если бы я добавил текст под изображениями, он бы выровнялся под изображением, однако он появляется рядом с изображением. Как бы я получить текст, чтобы показать внизу?

Answer 1

Просто поместите текст в <div>, который является блочным элементом и будет перенесен под изображение.

.row2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon {
    position: relative;
    display: inline-block;
    float: left;
    padding: 50px;
}

.icon__text {
    color: dodgerblue;
    font-weight: bold;
    text-align: center;
}

<div class="row2">
  <div align="center;" class="icon">
    <img src="https://picsum.photos/100" />
    <div class="icon__text">Text 1</div>
  </div>
  <div align="center;" class="icon">
    <img src="https://picsum.photos/100" />
    <div class="icon__text">Text 2</div>
  </div>
  <div align="center;" class="icon">
    <img src="https://picsum.photos/100" />
    <div class="icon__text">Text 3</div>
  </div>
</div>

Answer 2

Удалите float: left; из .icon - это в любом случае противоречит центрированию.

Или, если по какой-то причине вы на это указываете, добавьте clear: both к тегу, в который заключен ваш текст ( вероятно, тег <p>, но вы этого не описали). Это поместит текст под любым плавающим элементом над ним.