Почему текст не встает по центру блока?

Question

[vahromeevilya-widestudio]

Есть элемент хлебных крошек вот его код:

<div class="breadcrumbs">
   <a href="home.html" class="breadcrumbs__link">Главная страница</a>
   <span class="breadcrumbs__current">Оборудование</span>
</div>

Используется шрифт Gotham Pro Regular (400)

.breadcrumbs {
	margin: rem(-10) rem(-8);
	display: flex;
	flex-wrap: wrap;
	a,
	span {
		font-size: rem(11);
		line-height: rem(13);
		color: $breadcrumb;
		padding: rem(10) rem(8);
		display: inline-flex;
		align-items:center;
		position: relative;
	}
	a.breadcrumbs__link {
		text-decoration: underline;
		padding-right: rem(12);
		&::after{
			content:'';
			width: rem(4);
			height: rem(4);
			border-radius: 50%;
			background: $greenMain;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-100%);
		}
		@media (any-hover: hover){
			&:hover{
				text-decoration: none;
			}
		}
	}

	&__current {
	}
}

Не обращайте внимания на rem() это миксин который переводит в ремы , считайте что там написаны пиксели.

Суть проблемы :



по макету должно выглядеть как на картинке выше, текст Оборудование строго по центру своей оболочки что позволяет отлично спозиционировать псевдоэлемент по вертикали

Как же получается в реальности:


По непонятным мне причинам текст прилипает к верху вместо того чтобы быть по середине. Я убирал display: inline-flex;
убирал так же align-items:center; убирал padding и margin, игрался с line-height; просто высотой, и все равно проблема оставалась.

Можете подсказать как решить данный вопрос? Почему текст не хочет вставать по центру как ему положено.

Comments

[Ankhena]

align-items:center; это свойство флекс-контейнера, а не элементов.
Как только вы зададите его родителю, всё заработает.

Кстати, задавать inline-flex дочерним элементам флекса бесполезно. Они будут превращены в блочный аналог, т.е. в просто flex.

[vahromeevilya-widestudio]

убрал все лишние паддинги и марджини задал родителю align-items: center;

.breadcrumbs {
	//margin: rem(-10) rem(-8);
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	a,
	span {
		font-size: rem(11);
		line-height: rem(13);
		color: $breadcrumb;
		//padding: rem(10) rem(8);
		//display: inline-flex;
		//align-items:center;
		position: relative;
	}
	a.breadcrumbs__link {
		text-decoration: underline;
		padding-right: rem(12);
		&::after{
			content:'';
			width: rem(4);
			height: rem(4);
			border-radius: 50%;
			background: $greenMain;
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		@media (any-hover: hover){
			&:hover{
				text-decoration: none;
			}
		}
	}

	&__current {
	}
}

Но проблема осталась и она явно видна на этих скринах

[Ilya Olovyannikov]

vahromeevilya-widestudio, попробуй менять значение line-height; Попробуй 0 и от него подбери подходящее значение. То, что указано в макете часто не совпадает с реальностью.

[Иван Медведев]

vahromeevilya-widestudio, попробуй дать display: inline-block ссылке

[Beliyadm]

В песочнице вроде все ровно стоит https://codepen.io/pen/VwyjdRb

[Ankhena]

vahromeevilya-widestudio, https://codepen.io/AnnaSummer/pen/qBpNKMZ

И шрифты бывают кривыми.

p.s. хлебные крошки лучше делать списком.
Точку - псевдоэлементом li. (li:not(:last-child)::after{})
Плюсы:
- 100% не нужен абсолют для точки
- точка не входит в ссылку
- семантика для доступности

Или по крайней мере pointer-events none для псевдо.

[Иван Медведев]

Вставил твой код в CodePen - таких косяков нет. Проверь, нет ли на родителе, что выше параметров высоты или флекс и т.д.

[godsplane]

Почему никто еще не написал про vertical-align:middle . В свое время мне это помогло

[vahromeevilya-widestudio]

Всем огромное спасибо за ответы, я решил проверить теорию кривоты шрифтов, поставил обычный Arial и все выглядит просто балдежно. Действительно проблема в шрифте оказалась

[Ankhena]

godsplane,

Почему никто еще не написал про vertical-align:middle . В свое время мне это помогло

Потому что к флексам он не имеет отношения.

[vahromeevilya-widestudio]

Общими усилиями мы нашли ответ на вопрос, проблема оказалась в самом шрифте Gotham Pro Regular, когда я поставил Arial, все встало как надо