Как выровнять кнопку по центру используя 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!
Переместить по центру сайта
Название сайта по центру
Подскажите пожалуйста, как выровнять текст имени сайта по центру.
Тень по центру сайта
Приветствую всех, подскажите следущие как сделать тень по бокам сайта, но она должна быть 50% по.
Сделать дивчик по центру сайта
Вообщем имею дивчик с формой входа в админку. Как сделать так чтобы этот дивчик с формой был по.
Поставить меню сайта по центру
Имеется в наличии меню. Практически все сделал, но оно отображается в левой или в правой части.
52 / 40 / 15
Регистрация: 18.09.2020
Сообщений: 131
Записей в блоге: 3
Самый простой способ это
display: block; margin: 0 auto;
Или родителю задать text-align: center; если кнопка единственный дочерний элемент.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Фон сайта по центру окна.
Доброго времени суток. Я решил использовать на своем сайте скрипт, который меняет фон страницы в.
Как разместить логотип по центру сайта?
Пытаюсь сделать так что бы логотип располагался по середине экрана и масштабировался при изменении.
Выравнять слайдер по центру шапки сайта
Всем хорошего времени суток, вставил шорткод слайдера в шапку сайта http://skmedved.club/ <div.
Если Button 1 и Button 2 нажаты — Button 3 стала активной, как?
Проверка если Button 1 и Button 2 нажаты — Button 3 стала активной Причем нужно чтобы это.
Переместить скрипт с одного сайта на другой
Здравствуйте ребят, со скриптами первый раз сталкиваюсь, не знаю какую тему правильно выбрать, но.
Выравнивание кнопки по центру
Ребят привет! Помогите! Очень помощь нужна! Сайт работает на wordpress. Есть код кнопки facebook, но я никак не могу его по центру страницы выровнить, он всега слева получается. Как мне этот код ( кнопку ) поставить по центру страницы.
а вот скрины с компа и с телефона:
» />
Ответы на пост (16) Написать ответ
04.06.2016 13:37
А причём тут код кнопки? Код кнопки нужен для отображения и чтобы она выполняла функцию расшаривания.
Вам нужно обрамить дивом сам код кнопки, а в диве указать стили, которые нужно прописать в твоем файле css.
Тут нет гадалок, и чем код кнопки кривой выкладывать, лучше бы дали ссылку на ваш сайт, тогда и ответ тут дан был бы 100%
04.06.2016 13:48
поставь сейчас код из data-share=»false» в true . а то задаешь вопрос, а сам код меняешь и скрываешь, как анализировать? 🙂
04.06.2016 14:33
Ок. Щас все выставлю, чтоб вам яснее было. Вот сайт: universalika.ru
И кнопка тоже на сайте. Расскажите мне подробно. Как выставить кнопку в центр? Я просто новичок. Обясните так, чтоб я понял. Спасибо заранее огромное
04.06.2016 14:40
Поставьте для блока ширину width и добавьте display:block;margin: 0 auto;
04.06.2016 14:41
Забыл уточнить, все это нужно добавить к классу .fb_iframe_widget
04.06.2016 14:42
Либо просто сразу добавьте в css файл:
.fb_iframe_widget
04.06.2016 14:43
А где он находится?
04.06.2016 14:51
У вас на сайте этот класс прописан в конструкции
. Сам CSS файл находится по адресу:
http://universalika.ru/wp-content/themes/evolve/style.css Т.е лежит в вашей теме, под названием ‘Evolve’
04.06.2016 14:50
У вас на сайте этот класс прописан в конструкции
. Сам CSS файл находится по адресу:
http://universalika.ru/wp-content/themes/evolve/style.css Т.е лежит в вашей теме, под названием ‘Evolve’
04.06.2016 17:21
А откуда вы знаете название моей темы и вообще весь путь? Просто интересно. И еще. Файл я нашел. В какую именно часть надо прописать? И что именно нужно прописать?
04.06.2016 17:22
Вы не думайте что я чайник, просто уделите минут 5 мне — и я вам буду признателен
04.06.2016 19:15
Hayk Suqiasyan, просто тут многие начали превращаться в гадалок и им известно всё о вашем сайте, так что не удивляйтесь. 🙂
04.06.2016 20:00
А если серьезнее?
04.06.2016 23:47
вам ответ уже дал metamarfoz, а если его попросите получше, то может быть более правильный код вёрстки он тебе даст, который и для адаптивности моб. устройств.
пока примени его совет, но тогда на моб.устройствах страшно смотреть и ломается вёрстка, поисковики будут ругаться на немобильность :-(. . что я могу посоветовать, вместо ширины 79px поставте 35%
.fb_iframe_widget нельзя трогать, а наоборот создать доп. див . в диве прописать стиль, и уже в этот див кидать код «расшаривания», плюс дописать пару фишек . только тогда вы избежите проблем с моб.адаптацией.
тренируйтесь, прочитайте все сообщения тут сто раз, только тогда в вашей голове вырастет изюминка,
ведь тут не только советуют, но и помогают в развитии .
Как сделать кнопку по центру?
Как только делать кнопке 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. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.