Advertisements
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>