Вертикальное выравнивание по центру не работает в элементе span

Question

vertical-align:middle свойство не работает в элементе span. Я попытался поместить текст по центру и центру в элементе span. Я пробовал следующий код:

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

<span>center</span>

Answer 1

У вас есть много вариантов для этого. Я привел 3 примера:

1. Со свойством line-height ( в этом случае вы указываете высоту строки, такую ​​же, как высота ):

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

2. С display: table:

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

3. С 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-center span {
  display: table-cell;
}

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

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

Answer 2

Вы используете дисплей: блок;Блок отображения имеет поведение блока.

Но вы пытаетесь запустить текстовое поведение.

Если у вас есть известная высота, вы можете использовать только высоту строки.

Если высота, например, равна 150px:

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

Answer 3

установите высоту строки дочернего элемента, равную высоте контейнера, или установите позиционирование на контейнере и установите абсолютно дочерний элемент сверху: 50% с margin-top: -YYYpx, YYY - половина известной высоты ребенок.

Answer 4

Вы можете использовать display: flex для достижения этой цели.

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

<span>center</span>

vertical-align: middle не будет работать с display: block