Как центрировать кнопку css
Перейти к содержимому

Как центрировать кнопку css

  • автор:

Как сделать кнопку по центру html

Для того чтобы центрировать кнопку на странице, можно использовать следующий код:

 style="text-align:center"> Кнопка  

В данном примере кнопка будет находиться внутри блока , у которого задано свойство text-align:center . Это свойство позволяет выравнивать содержимое блока по центру.

Если нужно выровнять не только горизонтально, но и вертикально, то можно использовать следующий код:

 style="display:flex; justify-content:center; align-items:center; height:100vh;" > Кнопка  

В данном примере мы использовали свойство display:flex , чтобы создать гибкий контейнер, в котором содержимое будет выравниваться по центру. Свойство justify-content:center выравнивает содержимое по горизонтали, а align-items:center по вертикали. Свойство height:100vh задает высоту блока равную высоте видимой области окна браузера.

Как сделать кнопку по центру?

введите сюда описание изображения

Как только делать кнопке display: inline-block; — то кнопка сразу прилипает к левому краю и никакие text-align: center; не помогают 🙁

Отслеживать
задан 1 ноя 2016 в 11:09
81 2 2 золотых знака 3 3 серебряных знака 10 10 бронзовых знаков
Что такое сделали, что кнопка навидимая?
1 ноя 2016 в 11:16
@Sergey не понял Вас.
1 ноя 2016 в 11:17
Пробовали выполнять свой код? Текст кнопки-ссылки белый, на белом фоне не виден.
1 ноя 2016 в 11:33

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Как один из вариантов:

.section a < color: white; text-transform: uppercase; text-decoration: none; >.title-text < text-align: center; >.button < display: inline-block; height: 50px; line-height: 50px; position: relative; border: 1px solid white; padding: 0 1rem; >body
 

We are specialist in

Responsive designs, Stationary
And wordpress Themes

Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text.

Button Name

Отслеживать
ответ дан 1 ноя 2016 в 11:23
22.4k 11 11 золотых знаков 56 56 серебряных знаков 121 121 бронзовый знак
супер!! огромное спасибо!)
1 ноя 2016 в 11:30

Используйте css хаки)

.button < height: 50px; display:block; position: relative; border: 1px solid white; margin:0 auto; // отцентрирует блок по центру родительского элемента >

Отслеживать
ответ дан 1 ноя 2016 в 11:13
Broouzer King Broouzer King
776 1 1 золотой знак 6 6 серебряных знаков 29 29 бронзовых знаков
ни к чему не привело вообще 🙁
1 ноя 2016 в 11:15

inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block . Ибо ему просто некуда двигаться. Размеры-то одинаковые.

Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.

Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block . Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.

.section > div < display: inline-block; >.button < text-align: center; >.button > a < color: #39739d; background-color: #E1ECF4; border: 1px solid #96bdd9; padding: 5px; border-radius: 5px; box-shadow: inset 0 1px 0 #f4f8fb; text-decoration: none; >.button > a:hover
 

We are specialist in

Responsive designs, Stationary
And wordpress Themes

Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text.

Button Name

Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

Центрирование кнопки на HTML-странице: решение для всех браузеров

Чтобы центрировать кнопку с использованием CSS Flexbox, примените к обертке параметры display: flex , justify-content: center и align-items: center . Это обеспечит горизонтальное и вертикальное выравнивание кнопки. Также стоит задать высоту обертки равной 100vh , чтобы она заняла всю видимую высоту страницы. Кнопка помещается внутрь обертки, и таким образом достигается ее центрирование:

Скопировать код

.center-container

Скопировать код

Центрированная кнопка

Так можно позиционировать кнопку абсолютно точно в центре страницы.

Альтернативные методы центрирования

Хоть Flexbox и представляет собой современное решение, существуют и другие способы центрирования элементов, как по горизонтали, так и по вертикали.

Метод с использованием Grid Layout

CSS Grid — это мощный инструмент для организации макетов, который также позволяет непринужденно центрировать содержимое:

Центрирование кнопки внутри div 100% ширины: CSS решение

Центрировать кнопку внутри элемента div удобнее всего с помощью функционала CSS Flexbox. Для этого примените к div стиль display: flex и установите свойства justify-content и align-items на значение center . Таким образом, кнопка всегда будет размещаться по центру:

Скопировать код

.center-div

Скопировать код

Вжух! И я в центре!

Гибкость Flexbox

Предположим, что размеры вашей кнопки заранее определены. В таком случае Flexbox без проблем решит задачу центрирования как по горизонтали, так и по вертикали:

Скопировать код

.fixed-size-button

Горизонтальное выравнивание: тонкости с margin и text-align

В случае, если требуется горизонтальное центрирование кнопки без учета вертикали, можно применить margin или text-align . Использование margin: 0 auto; подходит для блочных элементов, а text-align: center; — для строчных элементов, заданных для родительского div :

Скопировать код

.horizontal-center-margin < display: block; margin: 0 auto; >.horizontal-center-text-align

Устаревшие техники, такие как отрицательные марджины в сочетании с position: relative; желательно избегать. Flexbox — это современный и надежный подход!

Стратегия фиксированного размера кнопки

Если размер кнопки фиксирован, можно использовать относительное позиционирование и трансформацию для ее центрирования:

Скопировать код

.fixed-size-center

Данная трансформация transform: translate(-50%, -50%); позволяет разместить центр кнопки точно в центре родительского div .

Уважение границ div

Кнопка не должна выходить за границы своего div . Воспользуйтесь padding и свойством box-sizing , чтобы все элементы размещались в рамках заданного макета:

Скопировать код

.boundary-respect

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

Представьте кнопку как экспонат в музее, а div — как витрину для этого экспоната:

Скопировать код

�� �� �� �� �� �� �� # Экспонат (кнопка) идеально расположен внутри витрины (div)

Flexbox действует в роли сотрудника музея, который идеально размещает экспонат посередине.

Важность указания ширины div для горизонтального выравнивания

Не забывайте, что по умолчанию ширина div равна 100% ширины родительского элемента, если иное не указано. Поэтому margin: 0 auto; для блочных элементов эффективно центрирует их внутри div .

Вертикальное выравнивание при изменяемой высоте div

Если высота div может меняться, то Flexbox поддерживает центрирование кнопки независимо от этих изменений.

Совместимость в браузерах

Применяйте методы, которые успешно работают в современных браузерах. Отказывайтесь от устаревших приемов, таких как float , clear и фиксированное позиционирование — они могут привести к непредсказуемым результатам. Flexbox отлично поддерживается современными браузерами и привлекает внимание веб-разработчиков.

Преимущества центрирования с фиксированной шириной

Опираясь на проверенные методы и беря на вооружение опыт сообщества, вы сможете найти полезные рекомендации по центрированию элементов с фиксированной шириной с использованием свойств смещения.

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

  1. Центрирование в CSS: Полное руководство | CSS-Tricks — всестороннее руководство по различным методам центрирования.
  2. Основные концепции flexbox – CSS: Каскадные Таблицы Стилей | MDN — основы работы с Flexbox.
  3. Что происходит, когда вы создаете контейнер Flexbox? — Smashing Magazine — увлекательное чтение с случаями использования и подробными объяснениями по Flexbox.
  4. Как центрировать кнопку в элементе DIV — понятное пошаговое руководство по центрированию кнопок.
  5. html – Как центрировать элемент по горизонтали и вертикали – Stack Overflow — обсуждения и различные решения по центрированию.
  6. Макет сетки CSS – CSS: Каскадные Таблицы Стилей | MDN — познакомьтесь с новейшими методами работы с макетами в CSS Grid.

Добавить комментарий

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