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

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

  • автор:

HTML/CSS: как центрировать по вертикали

HTML/CSS: как центрировать по вертикали главное изображение

При изучении стилизации HTML-страниц и механизмов выравнивания элементов средствами CSS, начинающий разработчик, как правило, сначала знакомится со способами горизонтального выравнивания элементов. В их числе, например, text-align: center; и margin: 0 auto; . С выравниванием по вертикали возникает больше вопросов. В этой статье разберем пять способов выравнивания элементов в HTML и CSS по вертикали.

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

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

1. У правила для горизонтального выравнивания текста text-align: center; , которое уже упоминалось выше, есть собрат, который называется vertical-align . Как и text-align , vertical-align выравнивает элементы со строчным или строчно-блочным типом бокса. Отличие в том, что свойство text-align применяется к родительскому блоку, а vertical-align необходимо применять непосредственно к выравниваемому элементу.

Свойство vertical-align удобно применять, когда необходимо, например, выровнять иконку внутри строки или два рядом стоящих строчно-блочных элемента. Важно понимать, что vertical-align выравнивает элемент относительно содержащей строки, а не относительно ближайших элементов.

Кроме того, свойство vertical-align можно использовать для того, чтобы выравнивать контент в ячейке таблицы.

2. Для тех, кто не знаком с принципами работы интерлиньяжа и свойством line-height , может стать откровением, что текст располагается посередине содержащей его строки. Этим можно пользоваться при выравнивании. Предположим, что у вас есть элементарный footer, в котором нужно расположить по центру копирайт:

  

Copyright - ThriveTalk 2017

Допустим, что высота футера равна 80px. Для того, чтобы текст вертикально встал ровно по центру, достаточно написать в CSS следующее:

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

3. Для предотвращения нежелаемного поведения, описанного в примере выше, можно использовать метод выравнивания: padding . Значения padding-top и padding-bottom помогут вам не только центрировать по вертикали, но и застраховаться от переполнения. Рассмотрим пример:

Предположим, вы верстаете кнопку, при нажатии на которую происходит переход на страницу заказа товара. Высота кнопки не должна превышать 50px. Из макета вы выгрузили следующие стили:

Высота контента внутри кнопки равна высоте строки и составляет 20px. Чтобы текст кнопки встал по центру, необходимо распределить по свойствам padding-top и padding-bottom оставшееся пространство следующим образом: (50px — 20px) / 2.

В результате получаем следующее:

Если текст кнопки измениться с «Заказать» на «Заказать товар онлайн» и перестанет помещаться на одной строке, кнопка сохранит нужный вид, а текст внутри неё по-прежнему будет находиться по центру.

Выравнивание при помощи padding универсально и подходит как для фразовых элементов, так и для выравнивания элементов с блочным типом бокса (но только в некоторых случаях).

4. Еще один инструмент — Flexbox. Внутри flex-контейнера любой элемент, будь то блочный, строчный или даже псевдоэлемент, становится flex-элементом, с которым можно производить любые манипуляции. В этой статье мы не будем подробно останавливаться на flex-свойств, почитать о них можно, например, тут.

У Flexbox есть ряд преимуществ перед обыкновенным выравниванием — в первую очередь это создание крупных сеточных структур и макросеток.

5. А что, если элемент абсолютно спозиционирован? Предположим, что вы сверстали модальное окно, которое нужно спозиционировать не относительно другого элемента, а относительно окна браузера. В этом случае можно использовать position: fixed; .

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

Положением спозиционированных элементов управляют свойства top , right , bottom , left . Попробуем следующее:

В данном случае модальное окно расположено не верно: ровно по центру находится левый верхний угол модального окна, а не его физический центр. Для того, чтобы выполнить его абсолютное позиционирование, изменим положение модального окна с помощью отрицательного margin :

У применения свойства margin в этой ситуации существует один недостаток. При изменении свойств width и/или height модального окна вам придется вручную «подкручивать» значения отрицательного margin , чтобы добиться половины размера его ширины и высоты. Этого можно избежать, используя вместо margin свойство transform . А transform: translate(X, Y) позволяет регулировать смещение элемента относительно исходного положение. Например, так:

В отличие от свойства margin , значения которого вычисляются от ширины родительского элемента, transform: translate(X, Y) берет за основу габариты самого элемента — в данном случае, модального окна. А это то, что нам и нужно. В результате, модальное окно будет всегда находиться в центре. Независимо от своих размеров.

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

Немного неровное выравнивание текста в кнопке по вертикали на разных устройствах

Наверняка многие сталкивались с этим. Речь идёт об обычной кнопке которой мы задаём какую то высоту height: 30px; и при этом этот текст на одних устройствах выравнивается чётко по вертикали (по середине), а на других немного съезжает вверх или вниз. Та же беда может быть и с браузерами. Если изменить высоту height: 30px; на пару пикселей, то эффект может на одних устройствах/браузерах пропасть, на других появиться. Вот например: https://jsfiddle.net/un609g38/

 button

Результат в Chrome, Firefox и IE (если задать одинаковый фон и границу разница в вертикальном выравнивании будет ещё более заметна):
введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения

Отслеживать
задан 15 апр 2017 в 6:09
user208916 user208916
Примеры и скриншоты? И вообще, а так ли это важно?
15 апр 2017 в 6:12

@AlexeyTen Ну как сказать, не приятно. Если есть какой то простой способ сделать лучше — почему бы им не воспользоваться.

– user208916
15 апр 2017 в 6:57

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

15 апр 2017 в 7:34

Напомню ещё, что есть разные OS и мобильные браузеры в которых не только размер, но и шрифт будет другим.

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

При выравнивании текста в кнопках или плашках нужно ориентироваться не на общие габариты текста, а на края его визуальной массы. Если текст набран прописными, то краями будут базовая линия и верх прописных букв:

У текста, набранного обычным способом, краями будут базовая линия и верх строчных букв:

Если вы будете принимать в расчёт торчащие выносные элементы, то надписи будут или «проваливаться», или «подскакивать» относительно центра кнопки. Более того, на разных кнопках текст будет стоять по‑разному. Скажем, если на одной кнопке будет написано «Сохранить», а на другой — «Написать»:

Больше о выравнивании по вертикали написал Артём Горбунов: совет о выравнивании текста в контролах.

P. S. Это был совет по средам о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Как выровнять текст во второй кнопке?

Здравствуйте! Подскажите пожалуйста, создал на сайте вторую аналогичную кнопку, но текст в кнопке не выравнивается по центру. пробовал добавить селектор к существующей кнопке, и второй вариант создать дубликат. И так и так текст во второй кнопке прилип к верхнему краю, хотя стоит text-align: center;. Курс ВЕБ-разработчик 2021 — с нуля до результата! | Задание 20 из 97

HTML: 
box
Для всех участников интенсива предусмотрены бонусы и подарки. Нажимайте на кнопку ниже, принимайте участие в вебинарах и забирайте свой приз по окончании обучения!
Записаться на интенсив!
CSS: .wright < min-height: 628px; padding: 86px 0 87px 0; >.wright img < display: block; margin: 0 auto; >.wright .wright_text < margin: 42px 0 52px 0; font-family: Roboto; font-size: 30px; line-height: 1.43; text-align: center; color: #252525; >.wright .wright_btn2

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

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