Круглая кнопка не центрирована по вертикали в React/CSS ⇐ CSS

[Anonymous]

Я создаю приложение React, и у меня есть таблица, в которой я отображаю кнопку «Добавить монету». Кнопка представляет собой круглую ссылку с символом + внутри нее. Проблема в том, что + не центрирован по вертикали внутри круга (он смещен вниз). Я попробовал несколько исправлений, но ничего не помогло.
Вот соответствующий код:
Компонент React (упрощенный):

Код: Выделить всё

[url={`/analysis?coin=${encodeURIComponent(coin.name)}&apiId=${encodeURIComponent(coin.data?.coin_id || ]
+
[/url]

CSS:

Код: Выделить всё

.result_table_add-coin-link {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 32px;
height: 32px;
background: var(--color-g1);
color: white;
border-radius: 50%;
text-decoration: none;
font-size: 1.5em;
font-weight: bold;
transition: all 0.2s ease;
cursor: pointer;
line-height: 1;
line-height: 32px; /* I tried both */
}

.result_table_add-coin-link:hover {
background: var(--color-g2);
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

Проверка элемента показывает:

Код: Выделить всё

.result_table_add-coin-link {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
font-size: 1.5em;
font-weight: bold;
line-height: 32px;
border-radius: 50%;
background: var(--color-g1);
color: white;
text-decoration: none;
}

Я тоже пробовал:

• Код: Выделить всё

  line-height: 1

• Код: Выделить всё

  line-height: 32px

• Код: Выделить всё

  transform: translateY(-1px)

…но + по-прежнему визуально не центрирован.
Другой соответствующий CSS:

Код: Выделить всё

* { margin: 0; padding: 0; box-sizing: border-box; }

.filter .results-table td { color: #1a1a1a; }

.filter .results-table { border-collapse: collapse; }

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

:root {
--color-g1: #38b2ac;
--color-g2: #2c7a7b;
}

Окружающая среда/Подробности:

• React 18
• Использование display: flex; align-items: center на круглой кнопке
• Шрифт: Inter
• Размер шрифта: 1,5em на +

Вопрос:
Почему символ + не центрируется по кругу вертикально даже при использовании флексбокса? Как я могу сделать его идеально центрированным в разных браузерах, не подталкивая вручную с помощью TranslateY?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -react-css