Как сделать кнопку по центру 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 серебряных знаков 120 120 бронзовых знаков
супер!! огромное спасибо!)
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. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.
Как выровнять кнопку по центру css
Для выравнивания кнопки по центру относительно родительского элемента мы можем указать следующие CSS свойства у родительского элемента:
display: flex; justify-content: center; align-items: center; Свойство justify-content отвечает в данном случае за выравнивание кнопки по горизонтали, а align-items — за выравнивание по вертикали.
Как выровнять button по центру блока?
Наконец-то смог выставить кнопку по центру, да еще адаптивно!
THANK YOU VERY MUCH. 🙂
Ирина Чернова @chernovairina
Если в блоке только кнопка, тогда вариант отличный. А если есть текст, тогда он и кнопка будут находиться на одно линии
Vovik_alkogolik @Vovik_alkogolik
margin: 0 auto;
display: block;
Ответ написан более двух лет назад
Комментировать
Нравится 5 Комментировать
Виртуальный глюк
.Absolute-Center
Ответ написан более трёх лет назад
Нравится 4 2 комментария
Очень плохой вариант, тогда будет кликабильна облась слева и справа от кнопки
Besenn0k, приходите когда подучите UX.
Мне помог флексбокс:
.button-wrapper
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
Alexander @AlexBlack666
.center Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Не правильно, Если в блоке поля и подписи к ним? Допустим их нужно будет выровнять по левому краю, а кнопку по середине. С вашим кодом выровняется всё.
Ilya Bobkov @heksen Автор вопроса
Не работает. Вот код:
.Absolute-Center