Горизонтальное центрирование label и input в div с CSS

Быстрый ответ

Для вертикального центрирования элементов примените модель flexbox. Установите для контейнера div свойство display: flex и align-items: center:

<div style="display: flex; align-items: center;">
  <label for="name">Имя:</label>
  <input type="text" id="name">
</div>

Так элементы label и input окажутся центрированными по вертикали, вне зависимости от их размеров.

Продвинутое вертикальное выравнивание с помощью Flexbox

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

Тонкая настройка расположения элементов с Flexbox

Используя flexbox, можно контролировать расположение каждого элемента в отдельности:

label {
  align-self: center; /* Каждый label определяет своё положение сам */
}
input {
  align-self: center; /* Аналогично применяется к элементу input */
}

С помощью дополнительного свойства justify-content можно гибко управлять горизонтальным распределением пространства:

div {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Равномерное распределение пространства между элементами */
}

Подробнее об этом расскажет наш спикер на видео

Использование свойства table-cell для классического выравнивания

Хотя сегодня веб-разработчики не так часто используют свойство display: table-cell, в некоторых случаях оно может пригодиться:

div {
  display: table-cell;
  vertical-align: middle; /* Классический способ центрирования */
}

В большинстве случаев для создания адаптивных макетов предпочтение отдают flexbox.

Обеспечение равной высоты у контейнера

Для достижения корректного выравнивания, можно определить для div фиксированную высоту:

div {
  height: 50px; /* Задает одинаковую высоту каждому div */
}

Придание эстетичности дизайну

Оформление фона и отступов поможет улучшить визуальное восприятие:

div {
  /* ... */
  background-color: #f0f0f0; /* Спокойный оттенок для фона */
  padding: 10px; /* Обеспечивает отступы вокруг содержимого */
}

Быстрое выравнивание с применением display: inline-block

Простой способ выравнивания – установить line-height, соответствующий высоте div:

label, input {
  display: inline-block;
  line-height: 50px; /* Значение, равное высоте div, для идеального центрирования */
}

Визуализация

Работа над вертикальным выравниванием в разработке напоминает детскую игру – всегда легко и интересно:

👧 Label
🎢
🧒 Input

Как будто label и input покатились вниз по горке (🎢), чтобы оказаться на одной линии.

Чтобы добиться этого, используйте:

div {
  display: flex;
  align-items: center; /* 🎢 Опускаемся к центру */
}

Так label👧 и input🧒 окажутся на одном уровне, как будто только что вдвоем покатились с горки! 🛝✨

Адаптивность и Flexbox

Flexbox – отличный выбор для создания адаптивных макетов:

@media (max-width: 600px) {
  div {
    flex-direction: column; /* Располагает элементы вертикально на узких экранах */
  }
  label, input {
    width: 100%; /* Делает элементы на всю ширину экрана */
  }
}

Упрощение структуры с помощью вложений

Замена input внутрь label обеспечит более ясную структуру кода:

<label for="name">Имя: <input type="text" id="name"></label>

Отступы для точного выравнивания

Настройка внешних отступов margin у элементов input помогает достигнуть идеального выравнивания:

input {
  margin-top: 5px; /* Для идеального выравнивания может потребоваться небольшая подстройка. */
}

Проверка в Internet Explorer

Проверьте работоспособность вашего дизайна в различных браузерах, включая Internet Explorer, чтобы гарантировать корректное отображение.

Полезные материалы

1. Центрирование в CSS: Полное руководство | CSS-Tricks — обширное руководство по центрированию в CSS.
2. Выравнивание блока в CSS – CSS: Каскадные таблицы стилей | MDN — документация MDN по управлению выравниванием блоков.
3. Полное руководство по Flexbox | CSS-Tricks — детальный обзор возможностей CSS Flexbox.
4. Как центрировать элемент по вертикали — практическое руководство W3Schools по центрированию элементов.
5. Все, что вам нужно знать о выравнивании в Flexbox — Smashing Magazine — содержательная статья о выравнивании с помощью Flexbox.
6. Наглядное руководство по свойствам CSS3 Flexbox | DigitalOcean — визуальный обзор свойств Flexbox.