Почему надпись не выравнивается по центру по вертикали(визуально приподнята на 2 пикселя вверх)?

Question

[larka_skaz]

https://codepen.io/Larka_Ska/pen/oPEjoW

Собственно нет твёрдых познаний css, из-за этого не могу понять почему надпись на фиолетовой кнопке уползает вверх.
Думаю что тут что-то не так с line-height... а может быть и нет.

Важно,чтобы кнопка была высотой в 40px, а надпись в 15 px, т.е. высота букв и паддинги должны в итоге влазить в 40px. Задавать высоту диву, в который размешена кнопка в эти 40 px - нельзя.

p.s. не обращайте внимания на то что иконка бутерброда размыта. Она будет 40 на 40 px в свг в итоге.

Answer 1

[BigSmoke]

У .menu-button a line-height можно убрать, а для .menu-button добавить

display: flex;
align-items: center;

Answer 2

[Exploding]

Вот, разбирайтесь https://codepen.io/Exploding2g/pen/MqQOoM

Answer 3

[AlexSus]

Если я правильно понял, что вам нужно, то добавьте vertical-align: middle; к тексту кнопки:

.menu-button a {
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 40px;
	vertical-align: middle;
}

Кстати line-height: 40px; вообще не работает, пока вы не укажите для тега a - display:inline-block;.
Если вам прямо нужно получить текст высотой 15px и чтобы родитель при этом был ровно 40 пикселей без указания его размеров, то финальный css будет такой:

.menu-button a {
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 15px;
	display:inline-block;
	vertical-align: middle;
}

Answer 4

[Кирилл Шульгин]

a {
  position: relative;
  top:1px
}

Думаю что дело было в подчеркивании от ссылки ( оно осталось при наведении) и занимало 1px

Comments

[larka_skaz]

Кирилл Шульгин, убрала подчеркивание, но все равно не по центру. Ваш способ наверное сработает, но я оставлю его напоследок. Может есть способ без костылей сделать нормально.