Как выровнять кнопки по центру css
Перейти к содержимому

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

  • автор:

CSS как выровнять ссылки и кнопки

В блоке навигации у меня несколько ссылок и кнопок с выпадающим меню с ссылками. Я хочу, чтобы кнопки и ссылки были на одной линии и одинаковой высоты (внезапно!).

Пробую это делать через padding , но они все равно не на одной линии. Еще и в разных браузерах по разному. В firefox они одного размера, но немного не по линии, а в chromium/safari они еще и разного размера. Как универсально выровнять?

Kharjo
13.11.23 11:04:32 MSK

  • Ответить на это сообщение
  • Ссылка

Вертикальное выравнивание текста в кнопках и полях ввода

Вы когда-нибудь боролись с вертикальным выравниванием содержимого ваших интерактивных элементов? Вы в хорошей компании. Многие из нас так делают.

В этой статье мы рассмотрим, как центрировать содержимое кнопок и элементов ввода с помощью line-height, padding и flexbox.

Итак, какова здесь наша цель?

Мы хотим построить систему, в которой:

  1. содержимое кнопок и элементов ввода идеально выровнено
  2. кнопки и элементы ввода имеют одинаковую высоту
  3. font-size, line-height, padding и border определяют размер кнопок и полей ввода *

* Альтернативный подход — установить фиксированную высоту (например, height: 40px; ) и высоту строки, равную значению высоты (например, line-height: 40px; ) для всех кнопок и инпутов. Однако использование отступов (вместо фиксированной высоты) безопаснее, поскольку кнопка будет адаптироваться к своему содержимому при любых обстоятельствах.

Базовая кнопка и стиль ввода

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

Имея это в виду, давайте определим основной стиль кнопок и инпутов:

  .btn, .form-control < /* reset user agent stylesheet */ background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; appearance: none; /* make sure properties affecting height have same value */ font-size: 1em; line-height: 1.2; padding: 0.5em var(--padding-x); border-width: 2px; border-style: solid; >/* button */ .btn < display: inline-flex; justify-content: center; /* center the content horizontally */ align-items: center; /* center the content vertically */ --padding-x: 1.2em; border-color: transparent; /* hide button border */ >/* input */ .form-control 

Выводы из приведенного выше фрагмента:

  1. Мы устанавливаем отображаемое значение кнопок равным inline-flex, чтобы мы могли использовать свойства justify-content и align-items для центрирования содержимого (особенно удобно, если вы поместите иконку внутри кнопки).
  2. Мы применяем одинаковые вертикальные отступы, размер шрифта, высоту строки и ширину границы к кнопкам и инпутам.
  3. Несмотря на то, что мы не планируем добавлять видимую рамку к кнопкам, мы все равно применяем ее (с прозрачным цветом), чтобы кнопки и инпуты имели одинаковую высоту.
  4. Значение высоты строки должно быть немного больше «1» . Если вы используете «1», элементы ввода не примут его, и они будут выше, чем кнопки. В нашем примере мы применяем «1.2» (вы можете использовать «normal», если хотите).

Этот базовый стиль гарантирует, что кнопки и элементы ввода имеют одинаковую высоту и их содержимое выровнено по вертикали. Вы можете изменить их размер шрифта (например, установить фиксированный размер шрифта) или применить другое семейство шрифтов, и это не повлияет на выравнивание. В конце концов, мы просто проталкиваем контент, используя отступы и границы.

Вы также можете масштабировать их вверх / вниз, используя единицы Em.

Сделай их красивыми

Все, что осталось сделать, это создать индивидуальную тему для наших кнопок и элементов ввода:

Исключения

Могут быть случаи, когда нам нужно установить фиксированную высоту для наших кнопок / элементов ввода, а высота строки по умолчанию нарушит выравнивание.

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

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

.height-30, .height-40, .height-50 < height: var(--height); &.btn, &.form-control < line-height: var(--height); padding-top: 0; padding-bottom: 0; >> .height-30 < --height: 30px; >.height-40 < --height: 40px; >.height-50

Выравнивание кнопки по центру

Ребят привет! Помогите! Очень помощь нужна! Сайт работает на wordpress. Есть код кнопки facebook, но я никак не могу его по центру страницы выровнить, он всега слева получается. Как мне этот код ( кнопку ) поставить по центру страницы.

а вот скрины с компа и с телефона:

12902876.jpg

» />

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *