Как выровнять лого и надпись по центру?

Question

[vitHlJT62b7VCE2]

Хочу в Header, слева сбоку, сделать блок с лого и справа от него, рядом, название сайта и всё это по центру.
Что я делаю не так? Изображение не выравнивается по центру (вертикально).

<div class="navbar_brand">
				<img src="./img/logo.png">
				<span>Название сайта</span>
			</div>

* {
	box-sizing: border-box;
}
.navbar_brand {
	height: 56px;
}

.navbar_brand img {
	display: inline-block;
	height: 32px;
	width: 32px;
	background-repeat: no-repeat;
}

.navbar_brand span {
	vertical-align: middle;
	display: inline-block;
}

Answer 1

[tyzberd]

.navbar_brand {
    display: flex;
    align-items: center;
}

Comments

[tyzberd]

или для img добавить vertical-align: middle; тоже должно быть норм

Answer 2

[a350]

margin: 0 auto;

Comments

[vitHlJT62b7VCE2]

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

[Stimulate]

vitHlJT62b7VCE2, margin-top: calc(50% - 28px);

Answer 3

[Edward]

.navbar_brand {
  height: 56px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Comments

[lamer350]

Эд, никогда не используйте position: absolute; в тех местах где можно без него обойтись. Да, возможно иногда это сделать проще всего, но это должно быть решением только в той ситуации, когда другие варианты говнокодистее.
Отдельным случаем является translateY, попросту с таким кодом вы получите размытую картинку и особенно шрифт на вебките. А множественное привлечение костылей типа translateZ может привести дополнительной нагрузке при рендинге страницы.
Общем ваш пример - это хороший пример как делать не нужно.

[lamer350]

не говоря уже о том что это никак не решит проблему топикмастера

[Edward]

lamer350, Спасибо, буду знать

Answer 4

[nikshyuk]

Попробуйте так:

.navbar_brand_wrap {
  display:block;
}
.navbar_brand {
  height: 56px;
  display:table;
}

.navbar_brand img {
  display: table-cell;
  vertical-align: middle;
}
.navbar_brand img {
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.navbar_brand span {
}