在下面的 Html 结构中，我无法像另一个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;
}