HTML центр выравнивания по вертикали не работает

Question

У меня возникла эта простая проблема, которая раньше работала во многих местах.Я пытаюсь выровнять элементы внутри div по вертикали и по центру.Здесь, в этом коде, работает поле left-left, но top поля не работает, я попытался изменить его на большее значение, но все равно ничего не изменилось.

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
}

<div class="footer">
    <section style="margin-left:15px; margin-top:10px;">FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>

Answer 1

Используйте подсказки flexbox просто @ rprm192 скажем.Но если вы хотите сделать его более простым и поддерживать более старый браузер, вы можете использовать line-height.Вот код для вас

.footer {
  height: 50px;
}
.footer section {
  height: 100%;
  line-height: 50px; //make it same as height value
}

Answer 2

Удалите встроенный стиль, используйте flexbox с flex-direction: column; justify-content: center; и text-align center; в нижнем колонтитуле.

.footer {
  background-color: #2E7FB6;
  color:white;
  height:50px;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="footer">
    <section>FETCHED: {{ recordsFetched }} Work Order(s)</section>
</div>