Html 使用字体图标居中文本

我正试图将一行文字居中，其中有一个字体很棒的图标。但是，图标悬停在文本上方而不是下方，并且不会延伸容器的高度

我的HTML如下所示：

<div id='container'>
  Some text
  <br>
  <i class='fas fa-camera'></i>
</div>

---

添加

文本对齐：居中

到

#容器

，并给你的图标它自己的元素标签<代码>不作为块元素处理

#容器{
背景色：红色；
宽度：100px；
高度：最大含量；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
文本对齐：居中；
}
#容器一{
高度：50px；
}

一些文本


测试

这不起作用。图标保持在原位。字体可怕的图标不被视为文本，这是问题的根源。@Tom888尝试使用两行的flex布局管理器怎么样？第一行是文本，第二行是图标，使用中心对齐查看此

#container {
  background-color: red;
  width: 100px;
  height: max-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
 }
#container i {
  height: 50px;
}