Home How to align one digit number to be on the middle of the below two digit numbers with html and css

Questions

How to align one digit number to be on the middle of the below two digit numbers with html and css

February 15, 2023

Having the following code snippet:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div><p class='mb-2'>This is the title!</p>
<div>
  <p><span>5</span> <i class='fa fa-sort-down'></i><span> = this is some text</span></p>
  <p><span>24</span> <i class='fa fa-sort-down'></i><span>  = this is another text over here</span></p>
  <p><span>31</span> <i class='fa fa-sort-down'></i><span> = the same</span></p>
</div>
</div>

As it can be seen in the code, 5 is exactly above 2. It must be above 24, like in the middle, between them.

I’ve tried to add display flex to the span and then aling-items or aling-self and set it to center but didn’t work.

Any suggestions

>Solution :

What about making all spans the same width and then centering the text inside those spans (you’ll need to set display: inline-block; to set the span width):

.number{
  display: inline-block;
  width:18px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div><p class='mb-2'>This is the title!</p>
<div>
  <p><span class="number">5</span> <i class='fa fa-sort-down'></i><span> = this is some text</span></p>
  <p><span class="number">24</span> <i class='fa fa-sort-down'></i><span>  = this is another text over here</span></p>
  <p><span class="number">31</span> <i class='fa fa-sort-down'></i><span> = the same</span></p>
</div>
</div>