Вертикальное выравнивание текста не работает для некоторых размеров шрифта - PullRequest
Новая
       46

Вертикальное выравнивание текста не работает для некоторых размеров шрифта

0 голосов
/ 21 июня 2020

Я создаю окно, в котором компоненты должны масштабироваться в соответствии с высотой окна, когда пользователь изменяет его размер. Для этого у меня есть JS для обновления стиля css компонентов всякий раз, когда окно меняет размер.

Для одного из компонентов я хочу, чтобы текст внутри него был центрирован, но для некоторые размеры шрифта, текст расположен слишком высоко: Пример неправильного вертикального выравнивания Я увеличил этот пример, чтобы сделать его более четким. На 1 пиксель над текстом и на 3 пикселя ниже.

Я пробовал

  • установка lineHeight = height и вертикальное выравнивание по центру
  • установка гибкости дисплея, align-items center и перенос текста в дочерний div / span.
  • установка lineHeight = 1 и соответствующие отступы сверху / снизу (те же значения)

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

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

html состоит из гибкого div дисплея с элементами кнопок, каждый из которых содержит текст, который нужно центрировать.

Edit 1:

Я воспроизвел его в этой скрипке: https://jsfiddle.net/Lz7p2joy/6/

<div class="strip">
  <button>SBO</button>
  <button>PIN</button>
  <button>ISN</button>
</div>

.strip{
  display: flex;
  float: left;
  margin-left: 5px;
  border-radius: 5px;
  border: 1px solid #3F3F46;
  overflow: hidden;
}

button{
    font-size: 8px;
    line-height: 10px;
    height: 10px;
    padding: 0px 3.8452px;
    text-align: center;
    
    background-color: #007ACC;
    color: #F1F1F1;
    border: none;
    border-right: 1px solid #3F3F46;
    border-radius: 0;
}

Это тонкое, но есть 3 пикселя пространства ниже текст и 1 пиксель выше. Это может немного зависеть от компьютера / монитора / браузера, на котором он запущен. Я видел несколько худших примеров на машинах пользователей (может быть связано с windows масштабированием дисплея).

...