Как выровнять button по центру css

Как выровнять кнопку по центру используя CSS и HTML

Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:

Разберем их подробнее.

Как использовать margin: auto для центрирования кнопки

Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto , а затем добавить display: block , чтобы сделать кнопку в центре.

button < margin: 0 auto; display: block; >

margin: 0 auto — это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.

Автоматическое поле — это то, что заставляет кнопку центрироваться. Тут важно, чтобы кнопка находилась внутри блока.

Как центрировать кнопку с помощью HTML тега div

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

Как будто ты размещаешь текст по центру.

div < text-align: center; >

div> button>Centered buttonbutton> div>

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

А если у тебя много кнопок, которые требуют частого обновления стиля, поддерживать их быстро становится проблемой.

В таком случае лучше использовать первый вариант.

Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.

Как центрировать кнопку с помощью CSS flexbox

Третий вариант — использовать flexbox для центрирования кнопки.

Этот подход идеален, если ты уже используешь flexbox на веб-странице, а кнопка находится внутри родительского элемента.

Чтобы центрировать кнопку с помощью flexbox , ты должен сделать 2 вещи:

сначала добавь display: flex к родительскому элементу кнопки, чтобы активировать функции flexbox
затем добавь justify-content: center , чтобы кнопка была по центру

В приведенном ниже примере div является родительским элементом кнопки.

div < display: flex; justify-content: center; >

div> button>Centered buttonbutton> div>

Теперь ты знаешь 3 способа центрирования кнопки в CSS!

Выровнять button по центру div css

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

Никакие text-align: center; не помогают

.calculator .container < text-align: center; margin: 0 auto; >#btnCalculator

Отслеживать
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
задан 18 июл 2017 в 16:05
233 1 1 золотой знак 3 3 серебряных знака 15 15 бронзовых знаков

1 ответ 1

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

Уже сама разобралась, забыла убрать float: right;

Отслеживать
ответ дан 18 июл 2017 в 16:12
233 1 1 золотой знак 3 3 серебряных знака 15 15 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

display: flex; justify-content: center; align-items: center;

Свойство justify-content отвечает в данном случае за выравнивание кнопки по горизонтали, а align-items — за выравнивание по вертикали.

Выровнять ссылки по центру с фиксированной шириной

Нет такой вариант выравнивает их по центру и они выстраиваются в ряд, а мне нужно одна под другой тоесть вертикально.

19 мая 2016 в 16:29
@ConstantineShibaev, т. е. как вертикально? А в условие это не нужно написать?
– user207618
19 мая 2016 в 16:31
@Constantine Shibaev, согласен, вы не написали это в задании. Вот так подойдет?
19 мая 2016 в 16:31

@Levelleor согласен затупил в условии не указал, даже при условии display: block; text-align: center; и если я ко всему этому ставлю фиксированную высоту как мне нужно они все равно расплываются в одну линию по горизонтали, вот что я имел в виду, прошу прощения за неадекватное изложение мысли (голова уже пухнет)

19 мая 2016 в 16:37

@Constantine Shibaev, расплываются по горизонтали? Этот код ставит их ровно в столбик по середине. Может вы у себя намудрили с стилями? Кстати если будете использовать подобный метод то выберите лучше вариант товарища «Other», я поленился сделать подобное.