Вертикальное центрирование

Общее
1

Привет!

Буду рад, если кто-нибудь поможет понять как отцентрировать изображение внутри ссылки внутри дива.

<div class="header-logo">
	<a href="index.html">
		<img src="img/logo.png" alt="Логотип">
	</a>
</div>

Контейнер header-logo немного больше по высоте, чем ссылка-изображение внутри него.
Понимаю, что можно вручную прописать отступы, но хотелось бы сделать центрирование автоматически.

Заранее спасибо!

2

Просто добавьте, диву, вертикальные паддинги и выравнивание текста по центру.
А фиксированная высота контейнера — это зло!

Если же нужно именно выравнивание в фиксированном контейнере, то:

.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
3

Спасибо!
Нужно без флексов реализовать пока что)

То есть только путем присвоения отступов?
Например, vertical-align не получится использовать? Или что-то подобное.

4

vertical-align — это внутристрочное выравнивание. Для блоков оно не применимо.

5

Это я знаю, но можно же к блочным применить display: inline?

6

Можно сделать так:

.header-logo {
  display: inline-block;
  width: 100%;
  height: 100px;
  text-align: center;
  line-height: 100px;
}