Не работает центрирование текста

Question

Пытался выровнять текст по центру блока при помощи vertical-align и text-align,

но текст не хочет выравниваться по центру. Каким образом это исправить?

#block{
background: gold;
height: 100px;
margin-bottom:10px;
}

#text{
font-size: 25px;
vertical-align: middle;
text-align: center;
}

<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>

Answer 1

И не должно работать. UPD заставил работать с vertical-align.

#block{
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  background-color: gold;
}

#text {
  background-color: tomato;
}

<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>

Answer 2

vertical-align - не предназначен для выравнивание текста по центру по оси Y.

Это свойство выравнивает элемент относительно родителя и окружающего его текста...

#block {
  background: gold;
  height: 100px;
  text-align: center;
}

span.s {
  vertical-align: -50px;
  font-size: 35px;
}

span.p {
  vertical-align: middle;
  font-size: 35px;
}

<div id="block">
  <span class="s">
            class="s"
        </span>
  <span class="p">
            class="p"
        </span>
</div>

Вариант два

#block {
  background: gold;
  height: 100px;
  text-align: center;
}

span.s {
  vertical-align: 20px;
  font-size: 35px;
}

span.p {
  vertical-align: -20px;
  font-size: 35px;
}

<div id="block">
  <span class="s">
            class="s"
        </span>
  <span class="p">
            class="p"
        </span>
</div>

что бы было понятнее

#block {
  background: gold;
  height: 100px;
  text-align: center;
}

span.s {
  vertical-align: baseline;
  font-size: 35px;
}

<div id="block">
  Lorem ipsum dolor sit amet
  <span class="s">Заяц и волк =)
   </span> incidunt nulla dignissimos
</div>

еще вариант

#block {
  background: gold;
  height: 100px;
  text-align: center;
}

span.s {
  vertical-align: middle;
  font-size: 35px;
}

<div id="block">
  Lorem ipsum dolor sit amet
  <span class="s">Заяц и волк =)
   </span> incidunt nulla dignissimos
</div>

Answer 3

Пример на flex

#block{
background: gold;
height: 100px;
margin-bottom:10px;
display: flex;
justify-content: space-around;

}

#text{
font-size: 25px;
align-self: center
}

<div id ="block">                  
<div id ="text">
Заяц и волк =)
</div>
</div>

БЛОГ НА HUSL

Не работает центрирование текста

Ответы (3 шт):