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

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

Наконец-то смог выставить кнопку по центру, да еще адаптивно!

THANK YOU VERY MUCH. 🙂

Ирина Чернова @chernovairina

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

Виртуальный глюк

.Absolute-Center

Ответ написан более трёх лет назад
Нравится 4 2 комментария
Очень плохой вариант, тогда будет кликабильна облась слева и справа от кнопки

Besenn0k, приходите когда подучите UX.
Vovik_alkogolik @Vovik_alkogolik
margin: 0 auto;
display: block;
Ответ написан более двух лет назад
Комментировать
Нравится 4 Комментировать

Мне помог флексбокс:

 
Я кнопка 

.button-wrapper

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Alexander @AlexBlack666

 .center 
Регистрация 

Ответ написан более трёх лет назад
Нравится 2 1 комментарий

Не правильно, Если в блоке поля и подписи к ним? Допустим их нужно будет выровнять по левому краю, а кнопку по середине. С вашим кодом выровняется всё.

Ilya Bobkov @heksen Автор вопроса
Не работает. Вот код:

 .Absolute-Center 
Регистрация 

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

Как только делать кнопке 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 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
супер!! огромное спасибо!)
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. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.

Как выровнять кнопку справа

Как можно передвинуть красную кнопку так что бы было как на фото? Ссылка на CodePen

.element-grid__element < display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; border-radius: 10px; overflow: hidden; max-width: 282px; >.element-grid__like-button < background-image: url(../../../images/like-pic.svg); padding: 0; margin-top: 6px; width: 21px; height: 20px; background-color: white; outline: none; border: none; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 2; >.element-grid__like-button:hover < opacity: 0.8; transition: all 1s ease-in; >.element-grid__photo < width: 282px; height: 282px; margin: 0; padding: 0; >.element-grid__text < font-family: 'Inter', ‘Arial’, sans-serif; font-style: normal; font-weight: 900; font-size: 24px; line-height: 29px; color: black; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 88%; >.element-grid__text-container < margin: 0; background: #FFFFFF; display: flex; justify-content: space-between; padding: 25px 19px 31px; align-items: center; >.element-grid < margin: 0; padding: 0; display: grid; grid-gap: 20px 18px; grid-template-columns: repeat(auto-fit, 282px); justify-content: center; >.popup-add < display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; >.popup-add__container < display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); border-radius: 10px; max-width: 430px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); >.popup-add__close < border: none; padding: 0; position: absolute; cursor: pointer; background: url(../images/сlose-icon.svg) no-repeat center; width: 40.7px; height: 40.7px; right: -40.7px; top: -40.7px; >.popup-add__close:hover < opacity: 0.6; transition: all .1s ease-in; >.popup-add__title < font-weight: 900; font-family: 'Inter', ‘Arial’, sans-serif; font-size: 24px; line-height: 29px; color: black; width: 358px; margin: auto; padding-top: 34px; >@media screen and (max-width: 550px) < .popup-add__title < max-width: 230px; font-size: 16px; line-height: 20px; >> .popup-add__input < border: none; margin: 29.74px auto 0; padding-bottom: 13.3px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); width: 358px; font-size: 14px; line-height: 17px; outline: none; color: #C4C4C4; >.popup-add__input:nth-of-type(1) < margin-top: 54px; >.popup-add__input:active < outline: 2px solid blue >@media screen and (max-width:750px) < .popup-add__input < width: auto; >> .popup-add__save-button < font-family: 'Inter', ‘Arial’, sans-serif; background: black; border: none; border-radius: 2px; height: 50.15px; width: 358px; margin: auto; color: white; margin: 48px auto 36.5px; cursor: pointer; >.popup-add__save-button:hover < background: rgba(0, 0, 0, 0.8); transition: all .1s ease-in; >@media screen and (max-width: 550px) < .popup-add__save-button < width: 200px; height: 35px; >> .popup-add_active < display: block; >.element-grid__like-button_active < background-image: url(../images/likepic.PNG); >.element-grid__delite-button < width: 20px; height: 20px; z-index: 4; /*position:absolute;*/ top: 0; right: 0; background-color: red; >.elements < max-width: 882px; margin: 76px auto 0; padding: 0; >.123a

эту кнопку ---------->
Новое Место
Загрузить

Отслеживать
11.5k 4 4 золотых знака 22 22 серебряных знака 38 38 бронзовых знаков
задан 27 июл 2020 в 15:32
user389240 user389240

@Vasily на карточках слева есть красная кнопка. Но я я хочу ее передвинуть вправо , что бы было как на фотографии (образец). По идее эта кнопка должна удалять картинку , но почему то не удаляет (хотя скрипт удаления вроде прописал)

– user389240
27 июл 2020 в 16:05

3 ответа 3

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

Задайте position: relative родительскому блоку, внутри него сделайте элемент, которому зададите position: absolute , тогда вы сможет манипулировать расположением absolute элемента с помощью css-свойств top , left , right , bottom

*, *::before, *::after < box-sizing: border-box; margin: 0; padding: 0; >img < display: block; max-width: 100%; >.card < width: 100vw; height: 100vh; margin: 0 auto; position: relative; >.card img < object-fit: cover; position: absolute; height: 100%; width: 100%; z-index: -1; >button < --white: rgba(255, 255, 255, 1); --black: rgba(0, 0, 0, 1); outline: none; border: 1px solid var(--white); background-color: var(--black); padding: 5px 10px; font-size: 5vw; cursor: pointer; color: var(--white); transition: border-color 0.2s linear, background-color 0.2s linear, color 0.2s linear; >button:hover < color: var(--black); border-color: var(--black); background-color: var(--white); >.card button

 
Helloooo 

Вариант с вашим кодом:

Я задал position: relative для .element-grid__element, position: absolute задал для .element-grid__delite-button

document.addEventListener("DOMContentLoaded", function() < let popupAdd = document.querySelector(".popup-add") let popupAddEditForm = document.querySelector(".profile__add-button") let popupAddClose = document.querySelector(".popup-add__close") let popupLoad = document.querySelector(".popup-add__save-button") popupLoad.addEventListener("click", function(e) < e.preventDefault() addSubmitHandler() >) function toggleAddPopup() < popupAdd.classList.toggle("popup-add_active") >function addForm() < toggleAddPopup() >popupAddEditForm.addEventListener("click", addForm) popupAddClose.addEventListener("click", toggleAddPopup) const initialCards = [< name: "Архыз", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg" >, < name: "Челябинская область", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg" >, < name: "Иваново", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/ivanovo.jpg" >, < name: "Камчатка", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kamchatka.jpg" >, < name: "Холмогорский район", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/kholmogorsky-rayon.jpg" >, < name: "Байкал", link: "https://pictures.s3.yandex.net/frontend-developer/cards-compressed/baikal.jpg" >] const toggleLikeButton = (e) => < e.target.classList.toggle("element-grid__like-button_active") >const addPhotoElement = (caption, imageLink) => < const elementTemplate = document.querySelector("#photo-elements-template").content const photoElement = elementTemplate.cloneNode(true) photoElement.querySelector(".element-grid__photo").src = imageLink photoElement.querySelector(".element-grid__text").textContent = caption const photoElementsList = document.querySelector(".element-grid") photoElementsList.prepend(photoElement) document.querySelector(".element-grid__like-button").addEventListener("click", toggleLikeButton) >const addCards = (array) => < array.forEach((item) =>< addPhotoElement(item.name, item.link) >) > addCards(initialCards) const addSubmitHandler = (e) => < const newPhotoElementName = document.getElementById("name").value const newPhotoElementLink = document.getElementById("link").value addPhotoElement(newPhotoElementName, newPhotoElementLink) toggleAddPopup() >>) const deleteCard = (e) =>

.profile__add-button < display: none; >.element-grid__delite-button < float: right; width: 20px; height: 20px; background-color: red; >.element-grid__element < display: flex; flex-direction: column; margin: 0; padding: 0; list-style-type: none; border-radius: 10px; overflow: hidden; max-width: 282px; position: relative; >.element-grid__like-button < background-image: url(../../../images/like-pic.svg); padding: 0; margin-top: 6px; width: 21px; height: 20px; background-color: white; outline: none; border: none; background-repeat: no-repeat; background-position: center; cursor: pointer; z-index: 2; >.element-grid__like-button:hover < opacity: 0.8; transition: all 1s ease-in; >.element-grid__photo < width: 282px; height: 282px; margin: 0; padding: 0; >.element-grid__text < font-family: 'Inter', ‘Arial’, sans-serif; font-style: normal; font-weight: 900; font-size: 24px; line-height: 29px; color: black; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 88%; >.element-grid__text-container < margin: 0; background: #FFFFFF; display: flex; justify-content: space-between; padding: 25px 19px 31px; align-items: center; >.element-grid < margin: 0; padding: 0; display: grid; grid-gap: 20px 18px; grid-template-columns: repeat(auto-fit, 282px); justify-content: center; >.popup-add < display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; >.popup-add__container < display: flex; flex-direction: column; justify-content: center; align-items: center; background: #FFFFFF; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15); border-radius: 10px; max-width: 430px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); >.popup-add__close < border: none; padding: 0; position: absolute; cursor: pointer; background: url(../images/сlose-icon.svg) no-repeat center; width: 40.7px; height: 40.7px; right: -40.7px; top: -40.7px; >.popup-add__close:hover < opacity: 0.6; transition: all .1s ease-in; >.popup-add__title < font-weight: 900; font-family: 'Inter', ‘Arial’, sans-serif; font-size: 24px; line-height: 29px; color: black; width: 358px; margin: auto; padding-top: 34px; >@media screen and (max-width: 550px) < .popup-add__title < max-width: 230px; font-size: 16px; line-height: 20px; >> .popup-add__input < border: none; margin: 29.74px auto 0; padding-bottom: 13.3px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); width: 358px; font-size: 14px; line-height: 17px; outline: none; color: #C4C4C4; >.popup-add__input:nth-of-type(1) < margin-top: 54px; >.popup-add__input:active < outline: 2px solid blue >@media screen and (max-width:750px) < .popup-add__input < width: auto; >> .popup-add__save-button < font-family: 'Inter', ‘Arial’, sans-serif; background: black; border: none; border-radius: 2px; height: 50.15px; width: 358px; margin: auto; color: white; margin: 48px auto 36.5px; cursor: pointer; >.popup-add__save-button:hover < background: rgba(0, 0, 0, 0.8); transition: all .1s ease-in; >@media screen and (max-width: 550px) < .popup-add__save-button < width: 200px; height: 35px; >> .popup-add_active < display: block; >.element-grid__like-button_active < background-image: url(../images/likepic.PNG); >.element-grid__delite-button < width: 20px; height: 20px; z-index: 4; position:absolute; top: 10px; right: 10px; background-color: red; >.elements

Новое Место
Загрузить

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

А причём тут код кнопки? Код кнопки нужен для отображения и чтобы она выполняла функцию расшаривания.
Вам нужно обрамить дивом сам код кнопки, а в диве указать стили, которые нужно прописать в твоем файле css.
Тут нет гадалок, и чем код кнопки кривой выкладывать, лучше бы дали ссылку на ваш сайт, тогда и ответ тут дан был бы 100%

поставь сейчас код из data-share=»false» в true … а то задаешь вопрос, а сам код меняешь и скрываешь, как анализировать? ��

Ок. Щас все выставлю, чтоб вам яснее было. Вот сайт: universalika.ru

И кнопка тоже на сайте. Расскажите мне подробно. Как выставить кнопку в центр? Я просто новичок. Обясните так, чтоб я понял. Спасибо заранее огромное

Поставьте для блока ширину width и добавьте display:block;margin: 0 auto;

Забыл уточнить, все это нужно добавить к классу . fb_iframe_widget

Либо просто сразу добавьте в css файл:
.fb_iframe_widget

А где он находится?

У вас на сайте этот класс прописан в конструкции

. Сам CSS файл находится по адресу:
http://universalika.ru/wp-content/themes/evolve/style.css Т.е лежит в вашей теме, под названием ‘Evolve’

У вас на сайте этот класс прописан в конструкции

. Сам CSS файл находится по адресу:
http://universalika.ru/wp-content/themes/evolve/style.css Т.е лежит в вашей теме, под названием ‘Evolve’

А откуда вы знаете название моей темы и вообще весь путь? Просто интересно. И еще. Файл я нашел. В какую именно часть надо прописать? И что именно нужно прописать?

Вы не думайте что я чайник, просто уделите минут 5 мне — и я вам буду признателен

Hayk Suqiasyan, просто тут многие начали превращаться в гадалок и им известно всё о вашем сайте, так что не удивляйтесь.

А если серьезнее?

вам ответ уже дал metamarfoz, а если его попросите получше, то может быть более правильный код вёрстки он тебе даст, который и для адаптивности моб. устройств.
пока примени его совет, но тогда на моб.устройствах страшно смотреть и ломается вёрстка, поисковики будут ругаться на немобильность :-(… … что я могу посоветовать, вместо ширины 79px поставте 35%
.fb_iframe_widget нельзя трогать, а наоборот создать доп. див … в диве прописать стиль, и уже в этот див кидать код «расшаривания», плюс дописать пару фишек … только тогда вы избежите проблем с моб.адаптацией.
тренируйтесь, прочитайте все сообщения тут сто раз, только тогда в вашей голове вырастет изюминка,
ведь тут не только советуют, но и помогают в развитии …

Вижу делаешь успехи, �� … у тебя три раза повторяются widget-one-column col-sm-6
(что дает число 18, а нужно 12 …) в вашем случае
должно быть три раза widget-one-column col-sm-4, а стайл текст центер лучше запиши в css файл, да и заголовки h5 h5 надо наверное закрыть? �� . .. заодно и от всех ошибок html избавишься на своем сайте,
https://validator.w3.org/nu/?doc=http%3A%2F%2Funiversalika.ru
А так молодец, ведь можешь когда хочешь! ��

Сочту за комплимент

Похожие посты

• Вертикальное выравнивание посередине
  1
• При выравнивание по ширине текст сильно расползается
  1
• Как сделать выравнивание с левой стороны
  2
• Выравнивание картинки
  6
• Оценка и помощь по сайту.
  6

Анализ сайта

Поможем улучшить ваш сайт.

Примеры создания дополнительных управляющих кнопок в приложении Mobile SMARTS

Пример 1 | Кнопка задана в строке текстом

Посмотрим, как сделать кнопку в строке при просмотре записей.

В действие «Просмотр записей» добавим новую колонку.

В формат ячейки напишем выражение для добавления кнопки.

Наше выражение для добавления кнопки выглядит так:

[HTML] 
Удалить,
где
Удаление фактической строки – имя действия, на который будет выполнен переход по нажатию кнопки;
Удалить – надпись на кнопке.  

Теперь при нажатии на кнопку будет выполняться переход на действие по удалению строки.

Пример 2 | Кнопка задана изображением

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

Для этого в действие «Ввод количества» у свойства «Текст в верхней части окна» нужно добавить кнопку с указанием на действие для перехода и атрибутом выравнивания align =» center » (по центру). Изображение добавляется тегами …, с возможностью форматирования (подробнее про вставку изображения смотрите здесь ).

Наше выражение для добавления кнопки выглядит так:

[HTML] 
 \Application\MobileSMARTS\Images\2.png,
где
align =" center " – выравнивание текста по центру, относительно кнопки в строке; 
Сканирование – имя действия, на который будет выполнен переход по нажатию кнопки;
 \Application\MobileSMARTS\Images\2.  png – вставленная картинка с указанием пути до нее на терминале и форматированием (прозрачность цвета фона).

Результатом нажатия кнопки будет переход на действие «Сканирование».

Пример 3 | Кнопка задана в верхней части окна текстом с изображением

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

Для этого в действие «Выбор номенклатуры» у свойства «Текст в верхней части окна» нужно добавить кнопку с указанием на действие для перехода. Изображение добавляется тегами …, с возможностью форматирования (подробнее про вставку изображения смотрите здесь).

Наше выражение для добавления кнопки в текст выглядит так:

[HTML] 
\Application\MobileSMARTS\Images\1.png просмотр строк,
где
width="80%" – ширина кнопки в процентах;
height="30" – высота кнопки в пикселях;
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
< img >\ Application \ MobileSMARTS \ Images \1.  png – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом нажатия кнопки будет переход на действие «ПросмотрФакт» (просмотр строк фактически отсканированных позиций).

Пример 4 | Кнопка задана с атрибутом enabled

Рассмотрим, как сделать кнопку, которая будет активна или нет при задании определенных условий.

Для примера добавим такую кнопку в верхнюю часть окна в действии «Выбор номенклатуры».

Добавим атрибут «enabled» и напишем условие, при выполнении которого кнопка будет активна.

[HTML] 
 \Application\MobileSMARTS\Images\1.png просмотр строк,
где
width="220" – ширина кнопки в пикселях;
height="25" – высота кнопки в пикселях; 
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
enabled lazy lazy-hidden" loading="lazy" src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://xn--90abhccf7b.xn--p1ai/800/600/https/fsd.multiurok.ru/html/2017/04/12/s_58ee89ed5aa47/img8.jpg" /> CurrentItems . Count >0>" – условие, при выполнении которого кнопка будет активна;
< img >\ Application \ MobileSMARTS \ Images \1. png – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом будет активная кнопка, при выполнении введенного условия, в нашем случае, если в документе количество строк с набранным товаром больше нуля (когда сканировался хоть один товар). Кнопка будет неактивна, например, когда в новом документе сканирование еще не проводилось, и нет еще ни одной строки с набранным товаром или строки были удалены.

Пример 5 | Кнопка задана с атрибутом visible

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

Для примера добавим такую кнопку в верхнюю часть окна в действии «Выбор номенклатуры».

Добавим атрибут «visible» и напишем условие, при выполнении которого кнопка будет отображаться.

[HTML] 
 \Application\MobileSMARTS\Images\1.png просмотр строк,
где
width="220" – ширина кнопки в пикселях;
height="25" – высота кнопки в пикселях;
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
visible ="0>" – условие, при выполнении которого кнопка будет отображаться; 
< img >\ Application \ MobileSMARTS \ Images \1. png – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом будет отображена кнопка, при выполнении введенного условия, в нашем случае, если в документе количество строк с набранным товаром больше нуля (когда сканировался хоть один товар). Кнопка не будет отображаться, например, когда в новом документе сканирование еще не проводилось, и нет еще ни одной строки с набранным товаром или строки были удалены.

Центрировать кнопку в HTML

Обзор

Как вы, вероятно, уже знаете, CSS в основном используется для позиционирования и выравнивания элементов на веб-сайтах. Многие элементы на веб-странице выравниваются или позиционируются с использованием различных методов, таких как CSS Grids, CSS Flexbox, свойство position и т. д. Элемент веб-страницы можно напрямую позиционировать, используя различные значения положения. Но центрирование элемента требует усилий, так как в HTML не существует эмпирического правила для центрирования элемента или кнопки. Вы обнаружите, что существуют различные методы, зависящие от множества факторов, для центрирования элемента или кнопки в HTML.

В этой статье вы узнаете, как центрировать кнопку в HTML. Центрирование или выравнивание, чтобы быть конкретным, иногда бывает сложной задачей, если это делается с помощью CSS. Но существуют различные методы или приемы, следуя которым вы можете центрировать кнопку в HTML.

Предпосылки

• Элементы линейного и блочного уровня
• CSS Flexbox
• Сетка CSS

Что мы создаем?

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

Предположим, у вас есть кнопка в HTML-коде, и она присутствует внутри элемента div, а свойство CSS, такое как text-align: center, используется для центрирования кнопки в HTML. Теперь это единственное свойство CSS центрирует кнопку на веб-странице. Читайте дальше в статье, чтобы узнать, почему свойство text-align используется для центрирования кнопки в HTML в этом случае. На изображении ниже показан результат использования свойства CSS text-align для центрирования кнопки в HTML.

Как видите, кнопка расположена на сайте горизонтально. Если вам интересно узнать больше о том, как для этого можно использовать CSS, продолжайте читать статью.

Теперь предположим, что вы удалили элемент div и в HTML-коде остался только элемент кнопки. В этом случае кнопка по умолчанию выравнивается по левому краю, потому что удален родительский контейнер, к которому было применено свойство CSS для центрирования этой кнопки. На изображении ниже показано, что кнопка теперь выравнивается по левому краю, когда к элементу кнопки не применяется CSS.

Поскольку элемент div удален, а CSS для центрирования текста удален, кнопка снова выравнивается по левому краю. Теперь, чтобы снова центрировать кнопку, вы должны следовать другой технике, чтобы центрировать кнопку. На этот раз в HTML-коде присутствует только один элемент, поэтому присутствует только встроенный элемент, то есть элемент кнопки. Теперь вы не можете использовать свойство text-align для центрирования кнопки в HTML, потому что родительский контейнер удален. Таким образом, вы должны сделать элемент кнопки блочным элементом и установить margin: 0 auto, чтобы центрировать кнопку по горизонтали.

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

Как видно из приведенного выше вывода, кнопка снова выровнена по центру с другим подходом. Таким образом, существуют различные методы центрирования кнопки в HTML. Чтобы узнать, как работают такие методы на различных примерах, продолжайте читать статью.

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

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

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

Центрировать кнопку в div

Давайте возьмем элемент кнопки внутри контейнера div. Теперь задача состоит в том, чтобы центрировать элемент кнопки по вертикали, а затем по горизонтали.

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

В этом примере кнопка центрируется по вертикали с использованием описанной ниже техники CSS.

HTML:

CSS:

Вывод

Давайте расшифруем, как используется CSS и почему кнопка вертикально центрирована в приведенном выше примере.

Во-первых, обратите внимание, что для родительского контейнера, т. е. элемента div, установлено значение position: relative. Для элемента кнопки установлено значение position: absolute, т. е. элемент кнопки выведен из нормального потока документов, а положение которого определяется в соответствии с его родительским контейнером, который имеет position: relative.

Свойство CSS top: 50% перемещает верхнюю часть абсолютно позиционированного элемента на 50% вниз, т.е. теперь элемент-кнопка размещается на половине высоты родителя. Обратите внимание, что здесь граница элемента кнопки размещена на 50% высоты родителя, или мы можем сказать, что верхняя часть элемента кнопки находится на 50% высоты родителя, что означает, что элемент кнопки начинается с 50% и не но по центру по вертикали.

На изображении ниже показано, что граница элемента кнопки начинается с 50% и еще не центрирована по вертикали.

Теперь для центрирования элемента кнопки используется свойство CSS transform: translateY(-50%). Это свойство перемещает абсолютно позиционированный элемент, здесь элемент кнопки, на 50% вверх от его собственной высоты, т.е. в вертикальном центре родительского элемента. Теперь элемент кнопки полностью центрирован по вертикали, как показано в выводе выше.

Как расположить кнопку по центру по горизонтали

В этом примере кнопка центрируется по горизонтали с использованием описанной ниже техники CSS.

HTML

CSS

Вывод

Давайте расшифруем, как используется CSS и почему в этом примере кнопка горизонтально центрирована.

Как объяснено в приведенном выше примере, обратите внимание, что для родительского контейнера, т. е. элемента div, установлено значение position: relative. Для элемента кнопки установлено значение position: absolute, т. е. элемент кнопки выведен из нормального потока документов, а положение которого определяется в соответствии с его родительским контейнером, который имеет position: relative.

CSS-свойство left: 50% перемещает левый край абсолютно позиционированного элемента на 50% вправо, т. е. теперь элемент-кнопка размещается в горизонтальном центре ширины родительского элемента. Обратите внимание, что здесь граница элемента кнопки размещена на 50% ширины родителя, или мы можем сказать, что левая часть элемента кнопки находится на 50% ширины родителя, что означает, что элемент кнопки начинается с 50% и не но по центру по горизонтали.

На изображении ниже показано, что граница элемента кнопки начинается с 50% и еще не центрирована по горизонтали.

Теперь для центрирования элемента кнопки используется свойство CSS transform: translateX(-50%). Это свойство перемещает абсолютно позиционированный элемент, здесь элемент кнопки, на 50% влево от его собственной ширины, т.е. в горизонтальном центре родительского элемента. Теперь элемент кнопки полностью центрирован по горизонтали, как показано в выводе выше.

Пример 1:text-align: center

Теперь давайте рассмотрим другой подход к центрированию кнопки в HTML по горизонтали. Давайте возьмем кнопку внутри контейнера div. Здесь мы собираемся центрировать элемент кнопки по горизонтали.

HTML

CSS

Вывод

Как показано в выводе выше, кнопка расположена по центру по горизонтали. Кнопка завернута внутрь контейнера div. Свойство CSS text-align: center используется для указания горизонтального выравнивания по центру элемента внутри блочного элемента, здесь элемент div.

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

Пример 2: margin: auto

Как обсуждалось выше, только встроенный блок и встроенный элемент могут быть центрированы с помощью свойства text-align: center. А как же блочные элементы? Элементы блока не могут быть центрированы с помощью text-align: center, потому что ширина элементов блока равна полной ширине, если не задана статическая ширина.

Предположим, вы установили некоторую ширину для элемента кнопки и установили для его свойства display значение block. Теперь вы можете использовать описанную ниже технику для центрирования кнопки в HTML.

HTML

CSS

Вывод

В приведенном выше примере присутствует кнопка, и она настроена на отображение: блок, и мы задали ширину 100 пикселей. Несмотря на то, что ширина элемента кнопки составляет 100 пикселей, рядом с ним не будет размещаться ни один другой элемент, поскольку для свойства отображения элемента кнопки задано значение блока.

Теперь вы можете центрировать элемент блочного уровня, установив для margin-left и margin-right значение auto, а для margin-top и margin-bottom — 0. Сокращенное свойство для использования всех четырех полей — margin: 0 auto.

Здесь margin: 0 auto устанавливает вертикальное поле равным 0 и автоматическое горизонтальное поле. Автоматическое горизонтальное поле здесь означает, что кнопка располагается по центру горизонтально относительно родительского контейнера.

Пример 3: display: flex

Теперь давайте изучим другой метод центрирования кнопки в HTML. В этом примере мы собираемся использовать CSS flexbox для центрирования кнопки в HTML.

HTML

CSS

Вывод

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

Две кнопки рядом

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

HTML

CSS

Вывод:

Как показано в выводе выше, свойство CSS display: flex применяется к родительскому контейнеру элемента кнопки. И для центрирования этих двух кнопок используются свойства CSS, такие как justify-content: center и align-items: center.

Обратите внимание, что кнопки имеют небольшое поле с правой стороны, чтобы добавить пространство между ними. Поля можно указать с помощью свойства CSS margin-right: 20px.

Пример 1: display: grid

Вот еще один метод, который используется для центрирования кнопки в HTML. В этом методе мы будем использовать свойства display: grid и margin: auto в основном для центрирования кнопки в HTML.

HTML

CSS

Вывод

Как показано на выходном изображении выше, кнопка центрируется в HTML с помощью CSS Grids. Кнопка заключена внутри контейнера div и родительского контейнера. Родительский контейнер имеет свойство CSS display: grid, поэтому все дочерние элементы внутри родительского контейнера следуют системе сетки.

Теперь, чтобы центрировать дочерний элемент, то есть элемент кнопки в приведенном выше примере, примените margin: auto к элементу кнопки, чтобы он был центрирован по вертикали и горизонтали. Вы также можете использовать justify-content: center и align-items: center вместе с системой сетки, чтобы центрировать кнопку или дочерний элемент по вертикали и горизонтали.

Заключение

• Существуют различные методы центрирования кнопки в HTML.
• Можно использовать такие методы, как центрирование кнопки в HTML с помощью flexbox, методы сетки в родительском контейнере.
• Методы goto для центрирования кнопки в HTML — это CSS Flexbox и CSS Grids.
• Вы можете центрировать встроенные и встроенные блочные элементы по горизонтали, используя свойство text-align: center в родительском элементе.
• Элементы уровня блока можно центрировать, используя свойство margin: 0 auto CSS.
• Когда две кнопки размещены рядом, вы можете использовать CSS Flexbox для центрирования кнопки в HTML и применить к кнопкам некоторое поле, чтобы добавить пространство вокруг кнопок.

css — попытка выровнять кнопку html по центру моей страницы

спросил 10 лет, 10 месяцев назад

Изменено 1 год, 10 месяцев назад

Просмотрено 1,0 м раз

На этот вопрос уже есть ответы здесь :

Как центрировать кнопку внутри div? (13 ответов)

Закрыт 3 года назад.

Я пытаюсь выровнять кнопку HTML точно по центру страницы независимо от используемого браузера. Он либо плавает влево, но все еще находится в вертикальном центре, либо находится где-то на странице, например, вверху страницы и т. д.

Я хочу, чтобы он был центрирован как по вертикали, так и по горизонтали. Вот что я написал прямо сейчас:

 имя моей кнопки

• html
• css
• кнопка
• выравнивание
• вертикальное выравнивание

Вот ваше решение: JsFiddle

По сути, поместите кнопку в div с центрированным текстом:

 
Кнопка 
 

Со следующими стилями:

.wrapper < выравнивание текста: по центру; >.кнопка

Есть много способов снять шкуру с кошки, и это только один из них.

Вы можете центрировать кнопку без использования text-align на родительском div простым использованием margin:auto; дисплей:блок;

HTML

 Отправить 

 
 имя_кнопки 
 

mybuttonname