0

In the following Html structure, I can't get the span after the Font Awesome icon to be centered like the spans in the other 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>

The first div with the 2 spans is centered perfectly, I figured it has something to do with the icon, but i don't know what the problem is, what do I have to do in order to center the text below the icon too ?

Update: It seems it has something to do with the icon, if the text is longer, the icon is not centered either.

If am using align content on the flex containers and that centers the items in the first div, why doesn't it work on the second div with the icon ?

Operter
  • 95
  • 7
  • text-align:center ? – Temani Afif Sep 04 '18 at 19:53
  • @TemaniAfif That works.. but why doesn't it get center by the flex container like the other elements ? – Operter Sep 04 '18 at 19:56
  • 3
    you centred the element but not what is inside the element ... by the way you can also do `align-items` instead of `align-content` (this is your real issue)... better than text-align .. also no need to add `inline-block` – Temani Afif Sep 04 '18 at 19:57
  • @TemaniAfif is right. I found this interactive cheat sheet very good: https://yoksel.github.io/flex-cheatsheet/#align-items – Andrei Damian-Fekete Sep 04 '18 at 20:01
  • Your span is a flex child, so it spans the entire width. use text-align margin:auto or for the flex div align-items **not align-content**. – G-Cyrillus Sep 05 '18 at 11:36

1 Answers1

2

You could add text-align: center; to the second div

.container div {
  text-align: center;
}
imjared
  • 19,492
  • 4
  • 49
  • 72