Html 如何在与页面中心对齐的图像下放置文本？

我有以下几行HTML和CSS将3个图像与页面中心对齐。
HTML:

---

我假设如果我在图像下添加文本，它会在图像下对齐，但是它会出现在图像旁边。如何使文本显示在下方？

只需将文本放入一个

块元素中，该块元素将环绕在图像下方

.row2{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.图标{
位置：相对位置；
显示：内联块；
浮动：左；
填充：50px；
}
.图标\文本{
颜色：淡蓝色；
字体大小：粗体；
文本对齐：居中；
}

文本1
文本2
文本3

移除

浮动：左来自
。图标
–它与居中方向相反

或者，如果出于某种原因，您在该标签上添加了
clear:both
，将文本包装到标签中（可能是
标签，但您没有对此进行描述）。这会将文本置于其上方的任何浮动元素下。
寻求代码帮助的问题必须包含在问题本身中复制文本所需的最短代码，最好是以最短的格式。看，这是一个短文本，但是，如果我有一个段落下的图像文本将继续在一个长行。如何让它拍摄多行？将
icon\u text
类的最大宽度设置为图像的宽度。
<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>

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

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