Как вы перемещаете текст по вертикали относительно его высоты строки?

Question

У меня есть небольшой текстовый элемент рядом с div, и они центрированы в гибком контейнере. Когда они такие короткие, становится очевидно, что текст слегка смещен вверх на несколько пикселей. Как бы вы исправили это, не используя margin-top для текста и не удаляя ни один из существующих стилей ниже? Есть ли способ переместить текст относительно его высоты строки?

.container {
display: flex;
align-items: center;
height: 2rem;
border: 1px solid black;
}

h2 {
	font-family: sans-serif;
	line-height: 1;
	font-size: 1rem;
	margin: 0;
}

.box {
	height: 1rem;
	width: 3rem;
	background: red;
}

<div class="container">
	<div class="box"></div>
	<h2>N</h2>
</div>

Answer 1

использовать выравнивание базовой линии вместо центра, а затем рассмотреть псевдоэлемент для имитации выравнивания по центру:

.container {
  display: flex;
  align-items: baseline;
  height: 2rem;
  border: 1px solid black;
}

h2 {
  font-family: sans-serif;
  line-height: 1;
  font-size: 1rem;
  margin: 0;
}

.box {
  height: 1rem;
  width: 3rem;
  background: red;
}

.container:before {
  content:"";
  height: 1.5rem; /* this value is not generic and need to be updated based on your case*/
}

<div class="container">
  <div class="box"></div>
  <h2>N</h2>
</div>

Или другая идея, когда вы настраиваете выравнивание внутри заголовка, используя другой хак с псевдоэлементом:

.container {
  display: flex;
  align-items: center;
  height: 2rem;
  border: 1px solid black;
}

h2 {
  font-family: sans-serif;
  line-height: 1;
  font-size: 1rem;
  margin: 0;
}
h2:before {
  content: "";
  vertical-align: super;
}

.box {
  height: 1rem;
  width: 3rem;
  background: red;
}

<div class="container">
  <div class="box"></div>
  <h2>N</h2>
</div>