Вы когда-нибудь испытывали трудности с вертикальным выравниванием содержимого ваших интерактивных элементов? Вы в хорошей компании. Многие из нас так делают.
В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода, используя высоту строки, отступы и гибкость.
⚡️ Конструируйте в 10 раз быстрее с нашей библиотекой из 292 компонентов →
Итак, какова наша цель?
Мы хотим построить систему, в которой:
- содержимое кнопок и элементов ввода идеально совмещено
- кнопки и элементы ввода имеют одинаковую высоту
- font-size, line-height, padding и border определяют размер кнопок и полей ввода *
* Альтернативный подход заключается в установке фиксированной высоты (например, height: 40px; ) и высоты строки, равной значению высоты (например, line-height: 40px; ) для всех кнопок и входов. Однако использование отступов (вместо фиксированной высоты) более безопасно, поскольку кнопка будет адаптироваться к своему содержимому при любых обстоятельствах.
Содержание статьи
Базовая кнопка и стиль ввода #
Высота и вертикальное выравнивание кнопок и входов определяется комбинацией границ, отступов, размера шрифта и высоты строки.
Имея это в виду, давайте определим основной стиль кнопок и вводов:
Выводы из приведенного выше фрагмента:
- Мы устанавливаем отображаемое значение кнопок равным inline-flex чтобы мы могли использовать свойства justify-content и align-items для центрирования содержимого (особенно удобно, если вы поместите значок внутри кнопки).
- Мы применяем одинаковые вертикальные отступы, размер шрифта, высоту строки и ширину границы к кнопкам и входам.
- Даже если мы не планируем добавлять видимую рамку к кнопкам, мы все равно применяем ее (с прозрачным цветом), чтобы кнопки и входы имели одинаковую высоту.
- Значение высоты строки должно быть немного больше «1» . Если вы используете «1», элементы ввода не примут его, и они будут выше, чем кнопки. В нашем примере мы применяем «1.2» (вы можете использовать «normal», если хотите).
Этот базовый стиль гарантирует, что кнопки и элементы ввода имеют одинаковую высоту, а их содержимое выровнено по вертикали. Вы можете изменить их размер шрифта (например, установить фиксированный размер шрифта) или применить другое семейство шрифтов, и это не повлияет на выравнивание. В конце концов, мы просто продвигаем контент, используя отступы и границы.
Вы также можете масштабировать их вверх / вниз, используя единицы Em.
Сделай их красивыми #
Осталось только создать индивидуальную тему для наших кнопок и входов:
Исключения #
Могут быть случаи, когда нам нужно установить фиксированную высоту для наших кнопок / элементов ввода, а высота строки по умолчанию нарушит выравнивание.
В таких случаях мы можем удалить вертикальное заполнение и установить высоту строки равной значению высоты.
Вот обходной путь, основанный на создании служебных классов высоты, которые ведут себя несколько иначе при применении к кнопкам и входам:
.height-30, .height-40, .height-50 {
height: var (- высота);
& .btn, & .form-control {
строка-высота: var (- высота);
padding-top: 0;
padding-bottom: 0;
}
}
.height-30 {
- высота: 30 пикселей;
}
.height-40 {
- высота: 40 пикселей;
}
.height-50 {
- высота: 50 пикселей;
}
Обратная связь? #
Вы хотите поделиться другим методом? Дайте нам знать в Твиттере!
Загрузка...
