Как расположить две кнопки относительно кнопки по центру на одинаковое растояние
Есть 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 Отслеживать
ответ дан 7 июл 2016 в 19:13
131 6 6 бронзовых знаков
Горизонтальная группа кнопок
Здесь вы узнаете, как сделать горизонтальную «группу кнопок» при помощи CSS.
Горизонтальные группы кнопок
Набор кнопок, собранных вместе в горизонтальную группу:
Apple Samsung Sony
Apple Samsung Sony
Как сделать группу кнопок
Шаг 1) Добавляем HTML:
Шаг 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
Выравненная по ширине группа кнопок
Два блока рядом друг с другом CSS
При формировании той или иной страницы на сайте иногда возникает необходимость создать колонки с тем или иным содержимым, которые находились рядом друг с другом. По умолчанию блоки не располагаются рядом друг с другом, а идут по порядку снизу.
Вопросы по теме статьи или любые другие можно оставить на странице обсуждения.
Создание блоков в HTML
Для начала нам нужно создать в HTML два блока на нашей странице:
div class="container"> div id="block1">Текстdiv> div id="block2">Текстdiv> div>
Оформление блоков DIV рядом друг с другом по горизонтали
Чтобы блоки расположить рядом друг с другом в одну линию необходимо прописать в CSS двум элементам следующие параметры:
#block1 float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; > #block2 float: left; display: block; width: 300px; border: 1px solid blue; margin: 2px; >
На выходе получим результат, как показано на изображении справа.
- float — можно придать значения «left» и «right«, фактический означает к какой стороне прикрепить блок, можно например первый блок разместить слева, второй справа и они хорошо впишутся. Пример смотрите в конце статьи в созданном шаблоне.
- display: block; — выводит div блоком.
Дополнительные настройки
Остальные параметры носят декоративный характер:
- width — задаём размер блокам
- border — настраиваем границу блоков
- margin — внешние отступы, чтобы блоки не прилипали друг к другу
Дополнительные опции решения задачи
- Flexbox: Вместо использования float, можно воспользоваться flexbox, что делает управление распределением элементов более гибким:
.container display: flex; > #block1, #block2 flex: 1; margin: 2px; border: 1px solid blue; >
- Grid: Также, можно использовать CSS Grid для более сложных макетов:
.container display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 4px; > #block1, #block2 border: 1px solid blue; >
Эти методы предоставляют более современные и гибкие подходы к вёрстке в сравнении с использованием float. Обновление вашей статьи с этой информацией может быть полезным для читателей, которые ищут современные методы верстки.
Примечание
Если же возникли трудности с вёрсткой на CSS или есть вопросы по данной статье, то задавайте их в специально созданной теме про CSS на нашем форуме.
Статьи по теме CSS
- Размер блока
- Оформление линий
- Оформление таблиц
- Выравнивание блока
- Два блока рядом
- Настройка ссылок
- Настройка фона
- Настройка шрифта
- Отступы
- Оформление картинок
- Галерея картинок
- Оформление кнопок
- Оформление списков
- Оформление иконок
- Курсор в CSS
- Навигационная панель
- Выпадающее меню
- Формы в CSS
- Вёрстка шаблона сайта
- CSS Flexbox
- CSS Grid
- Анимации и переходы CSS
- Медиа-запросы CSS
- CSS-препроцессоры
- 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!