Как расположить кнопки в ряд в html

           body Стандартная  Уведомление Внимание Отмены Сслыка 
 
Кнопка Кнопка Кнопка Кнопка 
 
Кнопка 
 
Кнопка Кнопка 
 
 
  Параметр 1  Параметр 2  Параметр 3 
 
  Параметр 1  Параметр 2  Параметр 3 
 

Как выровнять кнопку по центру используя 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!

Как расположить две кнопки относительно кнопки по центру на одинаковое растояние

Есть 3 кнопки кнопка 2 выровнена строго по центру, а две другие находятся на одинаковом расстоянии от нее. Как их таким образом расположить? Без использования сеток и фреймворков (bootstrap).

Отслеживать
Asa Fornote
задан 7 июл 2016 в 18:29
Asa Fornote Asa Fornote
15 1 1 серебряный знак 7 7 бронзовых знаков

2 ответа 2

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

Кросбраузерный вариант без использования Flex

.container-buttons button .container-buttons .container-buttons:after  
button 1 button 2 button 3 
 

Отслеживать
ответ дан 7 июл 2016 в 19:13
131 6 6 бронзовых знаков

display: flex + justify-content: space-around или justify-content: space-between

.container-buttons

 
button 1 button 2 button 3 

Отслеживать
ответ дан 7 июл 2016 в 18:39
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
Ты мой спаситель))
7 июл 2016 в 18:45

• html
• css
• вёрстка

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

Похожие

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

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

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

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

Горизонтальная группа кнопок

Здесь вы узнаете, как сделать горизонтальную «группу кнопок» при помощи CSS.

Горизонтальные группы кнопок

Набор кнопок, собранных вместе в горизонтальную группу:

Apple Samsung Sony
Apple Samsung Sony

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

Шаг 1) Добавляем HTML:

  
Apple Samsung Sony 
 

Шаг 2) Добавляем CSS:

 .btn-group button < background-color: #04AA6D; /* Зеленый фон */ border: 1px solid green; /* Зеленая рамка */ color: white; /* Белый текст */ padding: 10px 24px; /* Некоторый отступ */ cursor: pointer; /* Иконка указателя/руки */ float: left; /* Выстраиваем кнопки рядом друг с другом */ >.btn-group button:not(:last-child) < border-right: none; /* Исключаем двойную рамку */ >/* Сбрасываем обтекание (clearfix hack) */ .btn-group:after < content: ""; clear: both; display: table; >/* Добавляем фон при наведении курсора */ .btn-group button:hover

Выравненная по ширине группа кнопок

   
Apple Samsung Sony 
  
Apple Samsung Sony HTC