Question 45361 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    This is a table layout and you don’t need a fixed width:

    .table {
  display: table;
}
.table p {
  display: table-row;
}
.table p span:first-child {
  display: table-cell;
  text-align: center;
  padding: 0 5px;
}
    <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 class="table">
  <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>
  <p><span>999</span> <i class='fa fa-sort-down'></i><span> = the same</span></p>
</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search