Вертикальное выравнивание текста в кнопках и элементах ввода
От автора: вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.
Мы хотим построить систему, в которой:
содержимое кнопок и элементов ввода идеально выровнено
кнопки и элементы ввода имеют одинаковую высоту
font-size, line-height, padding и border определяют размер кнопок и полей ввода *
Онлайн курс по JavaScript
Научитесь создавать приложения со сложными интерфейсами
Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.
* Альтернативный подход — установить фиксированную высоту (например, height: 40px;) и высоту строки, равную значению высоты (например, line-height: 40px;) для всех кнопок и элементов ввода. Однако использование отступов (вместо фиксированной высоты) безопаснее, поскольку кнопка будет адаптироваться к содержимому при любых обстоятельствах.
Базовый стиль кнопок и элементов ввода
Высота и вертикальное выравнивание кнопок и элементов ввода определяется комбинацией границ, отступов, размера шрифта и высоты строки.
Факторы, влияющие на высоту кнопки / элемента ввода
Имея это в виду, давайте определим основной стиль кнопок и элементов ввода:
Выводы из приведенного выше фрагмента:
Мы устанавливаем отображаемое значение кнопок равным inline-flex, чтобы мы могли использовать свойства justify-content и align-items для центрирования содержимого (особенно удобно, если вы поместите иконку внутри кнопки).
Мы применяем одинаковые вертикальные отступы, размер шрифта, высоту строки и ширину границы к кнопкам и элементам ввода.
Несмотря на то, что мы не планируем добавлять видимую рамку к кнопкам, мы все равно применяем ее (с прозрачным цветом), чтобы кнопки и элементы ввода имели одинаковую высоту.
Значение высоты строки должно быть немного больше «1». Если вы используете «1», элементы ввода не примут его, и они будут выше, чем кнопки. В нашем примере мы применяем «1.2» (вы можете использовать «normal», если хотите).
Этот базовый стиль гарантирует, что кнопки и элементы ввода имеют одинаковую высоту и их содержимое выровнено по вертикали. Вы можете изменить их размер шрифта (например, установить фиксированный размер шрифта) или применить другое семейство шрифтов, и это не повлияет на выравнивание. В конце концов, мы просто смещаем контент, используя отступы и границы.
Вы также можете масштабировать их вверх / вниз, используя единицы Em.
Сделайте их красивыми
Все, что осталось сделать, это создать индивидуальную тему для кнопок и элементов ввода:
Исключения
Могут быть случаи, когда нам нужно установить фиксированную высоту для кнопок / элементов ввода, а высота строки по умолчанию нарушит выравнивание.
В таких случаях мы можем удалить вертикальный отступ и установить высоту строки равной значению высоты. Вот обходной путь, основанный на создании служебных классов высоты, которые ведут себя несколько иначе при применении к кнопкам и элементам ввода:
The Firefox Input Button Line-Height Bug
I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed!
For example, take the following code:
In a perfect world, this code would be a quick and easy way to vertically center text inside a button and set the button’s height, since text is always centered inside of the space created by its line-height.
But the results are inconsistent. Chrome, Safari, and (I can’t believe this either) Internet Explorer 8 all center the text and resize the button just like I’d expect. But the results are less than perfect in Firefox and Opera (see the image above).
The Problem, Defined
A quick look at Firebug proves enlightening: even though I’ve specified a line-height of 50px, Firefox is using a line-height of 15px instead.
It seems our bug isn’t really a bug at all, but a “feature”: that is, it’s a deliberate decision by Firefox to limit line heights on buttons. This is evidenced by this line of CSS in Firefox’s default CSS:
button, input[type=»reset»], input[type=»button»], input[type=»submit»]
Basically, Firefox is setting the line-height to “normal” on buttons and is enforcing this decision with an !important declaration. This is a frustrating decision on their part, particularly considering (as Eric Meyer has pointed out at great and detailed length), line-height: normal is anything but.
And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.
After a couple of hours of teeth-gnashing, I’ve settled on the following as an acceptable workaround. Instead of using line-height, use padding.
So to take the example from earlier, we’d convert it to look like this instead:
This effectively centers the text inside our buttons, but it isn’t ideal. It means there’s no easy way to ensure our buttons are using the same line-height as the rest of our content, and it means the size of the button can’t be dependent upon the size of the button text. But I’ll take what I can get on this one.
Как вы выравниваете текст внутри кнопки?
Я сделал кнопку с указанием height и line-height, они равны друг другу. Проблема в том, что в разных браузерах и с разным размером шрифта внутри кнопки, текст получается либо прижат вниз на пару пикселей либо наоборот вверх. Как вы верстаете типичные кнопки?
Просто паддинг не прокатит. Во первых высота кнопки зависит от шрафта в таком случае и она не четна, 23рх, 25рх и тд. Нет контроля за высотой короче.
lavezzi1: тогда что вам мешает менять паддинг в зависимости от размера шрифта, чтобы получалась требуемая высота?
Есть вероятность что будет разница в 1 пиксель из за специфики реализации, но это стандартный способ создания кнопок.
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < margin: 0; padding: 0 >html, body < width: 100%; height: 100% >a < outline: 0; border: 0 >table < border-collapse: collapse; border-spacing: 0 >fieldset, img < border: 0 >address, caption, cite, code, dfn, th, var < font-style: normal; font-weight: normal >ol, ul, nav, menu < list-style: none >caption, th < text-align: left >h1, h2, h3, h4, h5, h6 < font-size: 100%; font-weight: normal >q:before, q:after < content: '' >abbr, acronym < border: 0 >header, footer, nav, aside < display: block >input, textarea < outline: 0; border: 0 >input:active, textarea:active < outline: 0; border: 0 >.clearfix:before, .clearfix:after < content: ""; display: table >.clearfix:after < clear: both >.clearfix < zoom: 1 >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block >input, label, select, button, textarea < margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: 0; line-height: 1; font-size: 13px; font-family: Arial >input:focus < outline: 0 >input, textarea < -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box >button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box >input[type=checkbox], input[type=radio] < width: 13px; height: 13px >input[type=search] < -webkit-appearance: textfield; -webkit-box-sizing: content-box >::-webkit-search-decoration < display: none >button, input[type="reset"], input[type="button"], input[type="submit"] < overflow: visible; width: auto >::-webkit-file-upload-button < padding: 0; border: 0; background: 0 >textarea < vertical-align: top; overflow: auto >select[multiple]