Vertical Align Middle Not Working In Span Element

vertical-align:middle property is not working in span element. I have tried to place the text center- and middle-aligned in span element. I have tried the following code:

Solution 1:

You can use display: flex to achieve this.

span {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

<span>center</span>

vertical-align: middle will not work with display: block

Solution 2:

You have many options for this. I have provided 3 examples:

1. With line-height property(in this case u specify line-height same as height):

   .line-height-center {
      display: inline-block;
      line-height: 150px;
   }
   

2. With display: table:

   .table-center {
     display: inline-table;
   }
   
   .table-centerspan {
     display: table-cell;
   }
   

3. With display: inline-flex;:

   .flex-center {
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   

span {
  text-align: center;
  vertical-align: middle; /* Not working */height: 150px;
  width: 150px;
  border: 1px solid black;
}
.line-height-center {
  display: inline-block;
  line-height: 150px;
}

.table-center {
   display: inline-table;
}

.table-centerspan {
  display: table-cell;
}

.flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<p>With line height property:</p><spanclass="line-height-center">center</span><p>With display table:</p><spanclass="table-center"><span>center</span></span><p>With display flex:</p><spanclass="flex-center">center</span>

Solution 3:

set the line-height of the child equal to the height of the container, or set positioning on the container and absolutely position the child at top:50% with margin-top:-YYYpx, YYY being half the known height of the child.

Solution 4:

You are using display: block; Display block has a box behaviour.

But you trying to run a text behaviour.

If you have a known height you can use just the line height.

If height for example is 150px:

line-height: calc(150px - 15px);