这个问题在这里已有答案：
在下面的Html结构中，我无法在Font Awesome图标之后获得跨度，就像其他div中的跨度一样：
.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容器上使用对齐内容并将项目置于第一个div的中心，为什么它不能在带有图标的第二个div上工作？
你可以将text-align: center;添加到第二个div
.container div {
text-align: center;
}