Как выровнять label и input
Выравнивание элементов форм
До появления флексбоксов выравнивание элементов формы порой вызывало множество труднойстей. Но флексбоксы существенно упрощают этот процесс. Давайте начнём с простого примера.
Вот форма без флексбоксов.
Данная форма использует небольшое форматирование, но ширина всех полей ввода одинакова. Это приводит к тому, что правый край выглядит немного неровным, поскольку поля формы не располагаются прямо друг под другом. Если вас подобное устраивает, то хорошо, и нет необходимости что-либо делать дальше.
Но что если мы хотим растянуть поля ввода до правого края? Без флексбоксов получить такой результат было бы несколько болезненно. Особенно, если сама форма гибкая (то есть она расширяется и сжимается в зависимости от ширины родительского элемента или области просмотра). Если форма гибкая, то каждое поле ввода тоже должно расширяться и сжиматься по мере необходимости. В этом случае вы не можете использовать фиксированную ширину для полей ввода, потому что как только ширина формы изменится, ширина полей станет некорректной. Так что потребуется схитрить, чтобы всё работало правильно.
Тем не менее, флексбоксы позволяют сделать это без каких-либо магических трюков.
Теперь, когда каждая строка формы является флекс-контейнером, мы применяем следующий код к полям ввода.
Поля ввода одинаковой ширины
Вы можете изменить приведённый выше пример так, чтобы левый край полей формы также был в линию (как и правый край).
Это задаёт ширину полей формы как удвоенная ширина меток. Вы можете настроить это соотношение в зависимости от ширины формы или ожидаемой ширины. К примеру, можно использовать соотношение 1 к 3 или 1 к 4 для широких форм.
Если вы используете форму с фиксированной шириной, то можете установить одно соотношение, которое лучше всего подходит для формы. Если это гибкая форма, которая меняет ширину в зависимости от ширины области просмотра, то можете использовать медиа-запросы, чтобы установить разное соотношение для каждой точки останова.
Адаптивные поля ввода одинаковой ширины
Вот пример с медиа-запросами, которые меняют соотношение при изменении размера области просмотра.
Посмотрите эту форму на большом экране, затем уменьшите размер браузера. Вы должны увидеть как регулируется ширина полей ввода, когда вы уменьшаете окно браузера.
Выравнивание полей формы с помощью CSS
Задача
Добиться, чтобы поля ввода находились друг под другом, и при этом их положение определялось максимальной длиной заголовка поля слева. Решение не должно использовать таблиц и JavaScript.
Решение
Выровняем содержимое каждого дива по правому краю и назначим ему обновление потока.
Заставим каждый элемент label «утечь» влево.
Теперь каждый заголовок встал напротив соответствующего поля, но ширина формы стала 100% от ширины родительского элемента.
Для того, чтобы прижать поля к заголовкам, обернём всю конструкцию блоком:
Добавим в CSS обтекание для этого блока:
Теперь видно, что из-за float элементы перестали находится на одной линии. Vertical-align, к сожалению, работать не будет, но можно воспользоваться line-height.
Также зададим отступ между заголовком и полем:
Работающий вариант можно посмотреть здесь. А также заходите на сайт piumosso ))
Вертикальное выравнивание текста в кнопках и элементах ввода
Дата публикации: 2020-09-15
От автора: вы когда-нибудь боролись с вертикальным выравниванием содержимого интерактивных элементов? Вы не одиноки. Многие из сталкивались с этим. В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.
Итак, какова наша цель?
Мы хотим построить систему, в которой:
содержимое кнопок и элементов ввода идеально выровнено
кнопки и элементы ввода имеют одинаковую высоту
font-size, line-height, padding и border определяют размер кнопок и полей ввода *
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
* Альтернативный подход — установить фиксированную высоту (например, height: 40px;) и высоту строки, равную значению высоты (например, line-height: 40px;) для всех кнопок и элементов ввода. Однако использование отступов (вместо фиксированной высоты) безопаснее, поскольку кнопка будет адаптироваться к содержимому при любых обстоятельствах.
Базовый стиль кнопок и элементов ввода
Высота и вертикальное выравнивание кнопок и элементов ввода определяется комбинацией границ, отступов, размера шрифта и высоты строки.
Факторы, влияющие на высоту кнопки / элемента ввода
Имея это в виду, давайте определим основной стиль кнопок и элементов ввода:
Выводы из приведенного выше фрагмента:
Мы устанавливаем отображаемое значение кнопок равным inline-flex, чтобы мы могли использовать свойства justify-content и align-items для центрирования содержимого (особенно удобно, если вы поместите иконку внутри кнопки).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Мы применяем одинаковые вертикальные отступы, размер шрифта, высоту строки и ширину границы к кнопкам и элементам ввода.
Несмотря на то, что мы не планируем добавлять видимую рамку к кнопкам, мы все равно применяем ее (с прозрачным цветом), чтобы кнопки и элементы ввода имели одинаковую высоту.
Значение высоты строки должно быть немного больше «1». Если вы используете «1», элементы ввода не примут его, и они будут выше, чем кнопки. В нашем примере мы применяем «1.2» (вы можете использовать «normal», если хотите).
Этот базовый стиль гарантирует, что кнопки и элементы ввода имеют одинаковую высоту и их содержимое выровнено по вертикали. Вы можете изменить их размер шрифта (например, установить фиксированный размер шрифта) или применить другое семейство шрифтов, и это не повлияет на выравнивание. В конце концов, мы просто смещаем контент, используя отступы и границы.
Вы также можете масштабировать их вверх / вниз, используя единицы Em.
Сделайте их красивыми
Все, что осталось сделать, это создать индивидуальную тему для кнопок и элементов ввода:
Исключения
Могут быть случаи, когда нам нужно установить фиксированную высоту для кнопок / элементов ввода, а высота строки по умолчанию нарушит выравнивание.
В таких случаях мы можем удалить вертикальный отступ и установить высоту строки равной значению высоты. Вот обходной путь, основанный на создании служебных классов высоты, которые ведут себя несколько иначе при применении к кнопкам и элементам ввода:
CSS: как выровнять по вертикали «метку» и «вход» внутри «div»?
7 ответов:
более современным подходом было бы использование CSS flex-box.
более сложный пример. если в потоке гибкого трубопровода имеются многоэлементные элементы, можно использовать функцию выравнивания-self для выравнивания отдельных элементов по-разному для указанного выравнивания.
его также очень легко центрировать по горизонтали и вертикали:
это работает кросс-браузер, обеспечивает большую доступность и поставляется с меньшим разметки. угробить разд. Оберните этикетку
Я знаю, что этот вопрос был задан более двух лет назад, но для любых недавних зрителей, вот альтернативное решение, которое имеет несколько преимуществ перед решением Марка-Франсуа:
здесь мы просто только добавить line-height равно высоте div. Преимущество в том, что теперь вы можете изменить свойство отображения div, как вы считаете нужным, на inline-block например, и его содержимое останется вертикально по центру. Принятое решение требует, чтобы вы лечили div как ячейка таблицы. Это должно работать отлично, кросс-браузер.
единственное другое преимущество в том, что это всего лишь еще одно правило CSS вместо двух 🙂
оберните метку и введите в другой div с определенной высотой. Это может не работать в версиях IE ниже 8.
можно использовать display: table-cell собственность, как в следующем коде:
Как выровнять флажки и их метки последовательно в кросс-браузерах
Это одна из незначительных проблем CSS, которая постоянно беспокоит меня. Как люди вокруг Stack Overflow вертикально выравнивают checkboxes и labels последовательно кросс-браузер? Всякий раз, когда я правильно выравниваю их в Safari (обычно используя vertical-align: baseline на input ), они полностью отключены в Firefox и IE. Исправьте это в Firefox, и Safari и IE неизбежно испортятся. Я трачу на это время каждый раз, когда пишу код. форма.
вот стандартный код, с которым я работаю:
Я обычно использую сброс Эрика Мейера, поэтому элементы формы относительно чисты от переопределений. С нетерпением ждем любых советов или трюков, которые вы можете предложить!
30 ответов
после более чем часа настройки, тестирования и пробования разных стилей разметки, я думаю, что у меня может быть достойное решение. Требования к этому конкретному проекту были:
прежде чем я войду в любое объяснение, я просто дам вам код:
вот рабочий пример, в JSFiddle.
этот код предполагает, что вы используете сброс, как у Эрика Мейера, который не переопределяет поля ввода формы и отступы (следовательно, помещая отступы и отступы во входной CSS). Очевидно, что в живой среде вы, вероятно, будете вложенным / переопределяющим материалом для поддержка других элементов ввода, но я хотел, чтобы все было просто.
надеюсь, это поможет кому-то еще! Я не пробовал эту конкретную технику ни на одном проекте, кроме того, над которым я работал сегодня утром, так что определенно заткнитесь, если найдете что-то, что работает более последовательно.
иногда для вертикального выравнивания требуется два встроенных (span, label,input и т. д. ) элементы рядом друг с другом, чтобы работать должным образом. Следующие флажки правильно расположены по вертикали в IE, Safari, FF и Chrome, даже если размер текста очень мал или велик.
они все плавают рядом друг с другом на одной строке, но nowrap означает, что весь текст метки всегда остается рядом с флажком.
недостатком являются дополнительные бессмысленные теги SPAN.
теперь, если у вас очень длинный текст метки, что нужны чтобы обернуть без обертывания под флажком, вы бы использовали отступ и отрицательный текст на элементах метки:
работает с один карандаш решение, у меня есть то, что работает для меня и проще:
отображает пиксель за пикселем то же самое в Safari (чья базовая линия я доверяю), и Firefox и IE7 проверяют как хорошо. Он также работает для различных размеров шрифта этикетки, больших и малых. Теперь для фиксации базовой линии IE на выборках и входах.
попробовать vertical-align: middle
также ваш код кажется, что он должен быть:
попробуйте мое решение, я попробовал его в IE 6, FF2 и Chrome, и он отображает пиксель за пикселем во всех трех браузерах.
единственное идеально рабочее решение для меня:
протестировано сегодня в Chrome, Firefox, Opera, IE 7 и 8. Пример: Скрипка
Я обычно использую высоту строки, чтобы настроить вертикальное положение моего статического текста:
надеюсь, что это поможет.
Я не полностью протестировал свое решение, но, похоже, работает отлично.
затем я установил все флажки в 24px по высоте и ширине. Чтобы выровнять текст, я делаю метку line-height и 24px и назначить vertical-align: top; вот так:
если кто-нибудь обнаружит, что это не работает, пожалуйста, сообщите мне об этом. Вот он в действии (в Chrome и IE-извинения, поскольку скриншоты были сделаны на сетчатке и с использованием параллелей для IE):