Question

在以下HTML结构中，我无法像其他div中的跨度一样将Font Awesome图标居中之后的跨度：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  height: 200px;
  padding: 5px;
 }

.container span{
display: inline-block;
}

.container div{
display: flex;
 align-content: center;
 flex-direction: column;
}

<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
        
<div class="container">
  <div>
    <span>1</span>
    <span>1</span>
  </div>
  <div>
    <span><i class="fas fa-battery-quarter"></i></span>
    <span>2</span> <!-- this is not centered -->
  </div>
</div>

<!-- longer text shows that the icon is not center either -->
<div class="container">
  <div>
    <span>1</span>
    <span>1</span>
  </div>
  <div>
    <span><i class="fas fa-battery-quarter"></i></span>
    <span>2222</span> <!-- this is not centered -->
  </div>
</div>

具有2个跨度的第一个div居中对齐，我认为这与图标有关，但是我不知道问题出在什么地方，为了将文本居中放置在下面，我该怎么办图标吗？

更新：似乎与图标有关，如果文本较长，图标也不会居中。

如果要在flex容器上使用align内容，并且在第一个div中将项目居中，为什么它在带有图标的第二个div中不起作用？

Answer 1

您可以将text-align: center;添加到第二个div

.container div {
  text-align: center;
}

如何在flex容器内的Font Awesome图标后居中对齐？

1 个答案: