In the Html structure below, there is an issue with centering the span after the Font Awesome icon in one of the divs:
.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>The alignment issue seems to be related to the font awesome icon causing the text below it not being centered properly. How can I adjust my code to have both the icon and text centered?
Update: Upon further testing, it appears that the length of the text also affects the centering of the icon itself.
If align content works for the items in the first div, why doesn't it have the same effect on the second div containing the icon?