Я часто сталкиваюсь с проблемой вертикального центрирования одной строки css с использованием высоты строки. Я обычно использую этот метод для кнопок. Я просто устанавливаю высоту и высоту строки без заполнения, например:
height: 44px;
line-height: 44px;
Но иногда он не центрируется идеально. Смотрите эту скрипку:
https://jsfiddle.net/Lm444sny/1/
Мне просто было интересно, почему это не работает. Текст несколько центрирован, но не идеально.
Зависит от высоты строки самого шрифта. У одного шрифта больше пробелов, поэтому он кажется не выровненным.
Измените высоту строки кнопки на 47 пикселей или вообще не используйте внутренний тег. Chrome, например, выравнивает текст внутри кнопки с изгибом дисплея, теперь это лучший способ для вертикального центрирования. Взгляните на этот https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Почему бы вам не использовать вместо этого flex-box? Вы можете применить display:flex к кнопке, и ее содержимое будет flex-элементом (в данном случае это простой текст).
это зависит от свойства вертикального выравнивания. иногда, когда вы используете, например, иконочные шрифты, символы могут иметь разную высоту.
Наилучших результатов с вертикальным центрированием можно добиться с помощью flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
