Html css图标和文本彼此居中

如何将图标和文本放置在框中，然后将其居中。如果没有足够的空间放置文本，则应在顶部文本下换行。所以像这样：

一线二线
希望这样可以


.wrapper{
宽度：300px；
背景色：红色；
高度：150像素；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.图标{
高度：50px；
宽度：56px；
}
.文本{
利润率：10px；
文本转换：大写；
字号：700；
字体大小：20px；
}

一线

第二线
希望这样可以


.wrapper{
宽度：300px；
背景色：红色；
高度：150像素；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
.图标{
高度：50px；
宽度：56px；
}
.文本{
利润率：10px；
文本转换：大写；
字号：700；
字体大小：20px；
}

一线

第二线
这里的想法是二取二
显示：内联块
元素并排放置

并为它们提供足够的
边距
，以便它们相应地对齐。无需使用
flex
即可完成

参考代码：


.wrapper{
宽度：324px；
背景色：红色；
高度：130像素；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.图标{
高度：50px；
宽度：49%；
显示：内联块；
边缘顶部：20px；
垂直对齐：底部对齐；
}
.图标img{
宽度：50px；
浮动：对；
}
.文本{
显示：内联块；
宽度：49%；
文本转换：大写；
字体大小：粗体；
字体大小：20px；
垂直对齐：中间对齐；
}

一线二线
这里的想法是二取二
显示：内联块
元素并排放置

并为它们提供足够的
边距
，以便它们相应地对齐。无需使用
flex
即可完成

参考代码：


.wrapper{
宽度：324px；
背景色：红色；
高度：130像素；
文本对齐：居中；
填充：20px；
框大小：边框框；
}
.图标{
高度：50px；
宽度：49%；
显示：内联块；
边缘顶部：20px；
垂直对齐：底部对齐；
}
.图标img{
宽度：50px；
浮动：对；
}
.文本{
显示：内联块；
宽度：49%；
文本转换：大写；
字体大小：粗体；
字体大小：20px；
垂直对齐：中间对齐；
}

一线二线
你能为你正在尝试的创造一把小提琴吗？你能为你正在尝试的创造一把小提琴吗？+1代表解决方案。但是，不费吹灰之力回答问题是一种非常糟糕的做法，这会降低帖子的质量。谢谢，这就是我所寻找的+1解决方案。但是，不费吹灰之力回答问题是一种非常糟糕的做法，这会降低帖子的质量。谢谢，这正是我想要的
<div class="wrapper">
    <span class="icon"></span>
    <span class="text">First line second line</span>
</div