Центрирование элементов внутри <button> в Safari: flexbox

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

Вам потребуется переопределить стандартные стили элементов <button> и <fieldset> для их успешного интегрирования в Flexbox или Grid:

button, fieldset {
  display: flex;
  justify-content: center;
  align-items: center;
}

Такие изменения позволят указанным элементам без препятствий вписаться в систему flex-контейнеров.

Почему элементы не подчиняются?

В контексте HTML некоторые элементы имеют предустановленные свойства отображения, которые оказывают сопротивление воздействию flex или grid. Именно так происходит с <button> и <fieldset>. Поведение этих элементов задаётся стандартными стилями браузеров, которые, как правило, затрудняют применение свойств flex или grid. Чтобы предотвратить возникновение нежелательных эффектов, таких как появление скролл-баров или сбой в макете, рекомендуется сбросить стандартные стили.

Мастерство управления: Span

Превращение <button> в контейнер flex может привести к проблемам. В таких случаях оптимально использовать элемент <span> в качестве обёртки внутри <button> для обеспечения правильного выравнивания и центрирования содержимого:

<button>
  <span class="btn-content">Нажми меня</span>
</button>

.btn-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

| Транспорт       | Наклейка    | Результат     |
| --------------- | ----------- | ------------- |
| Спорткар        | ✅          | Получилось стильно |
| Грузовик        | ✅          | Идеальное сочетание |
| Кнопка          | ❌          | Наклейка не держится |
| Fieldset        | ❌          | Наклейка соскальзывает |

В контексте нашей аналогии <button> и <fieldset> – это транспортные средства, на которые стикер в виде Flex или Grid не клеится без дополнительной обработки.

Повелительство над браузерной средой

Разработчикам приходится сталкиваться с разницей в работе различных браузеров и пытаться устранить эти различия. Начиная с версии 83, Chrome поддерживает применение flex и grid к button, но в браузерах старше этой версии и в других браузерах могут возникать проблемы:

button {
  display: inline-flex;
  width: auto;
  height: auto;
}

В Safari и его аналогах могут обнаружиться сложности с использованием flex-макета. В таком случае псевдоэлементы могут помочь содержимому кнопки оставаться корректно выровненным:

button::before,
button::after {
  content: '';
  flex: 1;
}

Применяем Flex и Grid на кнопках профессионально

Свойства display: Заметки о сложностях

Учтите, что присваивание display: flex или grid элементу <button> влияет на его содержимое, однако не всегда создаёт новый flex-контекст.

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

Использование псевдоэлементов с выгодой

При необходимости выравнивания содержимого в неподатливых кнопках псевдоэлементы сумеют прийти вам на помощь:

button::before {
  content: '';
  margin-right: auto;
}

button::after {
  content: '';
  margin-left: auto;
}

Overflow: Будьте внимательны

Применение overflow: scroll на кнопках в попытках ограничить размер содержимого может привести к неожиданному появлению скроллбаров. Сосредоточьтесь на управлении размерами содержимого и внутренними отступами, используйте overflow только в крайнем случае.

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

1. Полный гид по Flexbox | CSS-Tricks – Изучите все тонкости работы с Flexbox.
2. CSS flexible box layout – MDN – Обширное руководство по Flexbox от MDN.
3. CSS grid layout – MDN – Официальное руководство по CSS Grid от MDN.
4. CSS Flexible Box Layout Module | Can I use... – Информационная таблица по поддержке Flexbox браузерами.
5. Полный гид по CSS Grid | CSS-Tricks – Все, что вам нужно знать о CSS Grid с примерами использования.
6. html – Why can't <fieldset> be flex containers? – Stack Overflow – Обсуждение проблем с использованием fieldset в сочетании с Flexbox и Grid на Stack Overflow.