以字体真棒图标居中文本

Question

我正在尝试在一行文本中居中显示一个字体真棒图标。但是，图标悬停在文本上方而不是文本下方，并且不会扩展容器的高度

我的HTML如下：

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

和CSS：

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

Answer 1

将text-align: center;添加到#container并为您的图标提供自己的元素标签。 <i>不作为一个块元素处理。

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

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