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

автор: admin
11.03.2024

Как выровнять кнопку по центру используя 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!

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

Наверняка многие сталкивались с этим. Речь идёт об обычной кнопке которой мы задаём какую то высоту 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 и мобильные браузеры в которых не только размер, но и шрифт будет другим.

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

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

Для выравнивания кнопки по центру относительно родительского элемента мы можем указать следующие CSS свойства у родительского элемента:

display: flex; justify-content: center; align-items: center;

Свойство justify-content отвечает в данном случае за выравнивание кнопки по горизонтали, а align-items — за выравнивание по вертикали.