Как центрировать текст и заголовки в CSS с помощью свойства Text-Align
Центрирование текста с помощью CSS может сделать вашу страницу организованной и симметричной, привлекая внимание посетителя к определенным элементам на странице. Например, заголовки, цитаты и призывы к действию часто располагаются по центру, чтобы нарушить ход документа и привлечь внимание читателя.
Вот почему приведенный ниже текст CTA расположен по центру.
Чтобы убедиться, что вы понимаете этот распространенный тип выравнивания, мы сначала рассмотрим, как центрировать текст по горизонтали. Затем мы рассмотрим несколько способов центрирования текста по вертикали.
Как центрировать текст в CSS
Чтобы центрировать текст в CSS, используйте свойство text-align и задайте для него значение ‘center’. Вы можете использовать эту технику внутри блочных элементов, таких как div.
Вы также можете центрировать текст в HTML, что полезно, если вы хотите центрировать только отдельные элементы на странице в каждом конкретном случае.
Но если вы заинтересованы в центрировании элемента типа, например, всех h2 в вашем блоге, лучше сделать это в CSS.
Выравнивание текста по центру в CSS
Ниже мы рассмотрим несколько руководств по центрированию текста снаружи и внутри других элементов.
Центрирование текста с помощью свойства Text-Align
Начнем с простого примера. Допустим, у вас есть текстовая веб-страница, и вы хотите центрировать весь текст. Затем вы можете использовать универсальный селектор CSS (*) или тело селектора типа для выбора каждого элемента на странице. Затем вы должны установить для свойства text-align значение center.
Вот как это выглядит:
См. статью Центрирование текста пером с использованием свойства Text-Align от HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование типа HTML-элемента с помощью свойства Text-Align другие элементы кроме текста? В этом случае вы должны использовать то же свойство text-align, но другой селектор CSS.
Например, вы хотите, чтобы заголовки располагались по центру страницы, а абзацы — по левому краю. Затем вы должны использовать селектор типа h3 и установить для свойства text-align значение center. Вам не нужно добавлять дополнительный код для выравнивания абзацев — по умолчанию они будут выровнены по левому краю.
Бесплатный ресурс
25 HTML & CSS Hacks
Заполните форму, чтобы получить бесплатные советы по программированию.
Вот как это выглядит:
См. Pen Centering HTML Element Type with CSS by HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование отдельных элементов с помощью CSS ID
Если вы хотите центрировать только один элемент на странице, вы можете добавить атрибут ID к элементу и целевому это с селектором ID. Или вы можете использовать встроенный CSS.
Во-первых, давайте воспользуемся атрибутом ID и селектором.
Вот CSS:
См. Pen Centering Individual Elements with CSS by HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование текста внутри кнопки с помощью встроенного CSS
Теперь давайте воспользуемся встроенным CSS. Но вместо центрирования заголовков и абзацев давайте центрируем текст внутри другого элемента.
Допустим, я создаю веб-страницу с помощью Bootstrap CSS и добавляю кнопку Bootstrap, которую хочу центрировать на странице. Выравнивание кнопки и текста внутри кнопки будет немного отличаться от приведенных выше примеров. Это связано с тем, что свойство text-align работает только с содержимым внутри блочных элементов, таких как заголовки и абзацы, а не с встроенными элементами, такими как кнопки.
Итак, во-первых, я должен обернуть кнопку в div. Затем я мог бы применить встроенный CSS к div, чтобы выровнять содержимое по центру внутри div.
Вот как это выглядит:
Посмотрите, как ручка центрирует текст внутри кнопки с помощью CSS от HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование блочного элемента с использованием свойства Margin
Если вы центрируете весь блочный элемент, например div, свойство text-align не будет работать. (Обратите внимание, что это работает при центрировании содержимого внутри div.) Вместо этого вы можете использовать свойство margin для центрирования всего элемента. Вот как это выглядит:
См. Pen, центрирующий блочный элемент с помощью свойства Margin от HubSpot (@hubspot) на CodePen.
Вот результат:
Узнайте, как центрировать div в CSS, здесь.
Центрирование текста внутри элемента Div
Допустим, вы хотите центрировать элемент div, а также текст внутри него.
Как и в предыдущем примере, добавьте селектор идентификатора «центр» к выбранному вами div, затем установите для поля значение «авто». Затем добавьте объявление «text-align: center».
Вот как это выглядит:
См. центрирование текста пером внутри центрированного Div от HubSpot (@hubspot) на CodePen.
Вот результат:
Как видно из приведенных выше примеров, свойство text-align указывает только горизонтальное выравнивание текста. Задать вертикальное выравнивание текста сложнее. Давайте посмотрим ниже.
Выровнять текст по вертикали
Вы можете центрировать текст по вертикали несколькими способами. Для приведенных ниже методов текст должен содержаться в родительском элементе, таком как div. Начнем с самого простого.
Обратите внимание: если вы хотите, чтобы ваш текст также располагался по центру по горизонтали, просто добавьте свойство text-align и установите для него значение center в любом из приведенных ниже примеров.
Вертикальное центрирование текста с использованием отступов CSS
Одно из самых простых решений для вертикального центрирования текста — использование отступов сверху и снизу.
Чтобы применить заполнение CSS к элементу, я могу использовать метод длинной формы и определить свойства padding-top и padding-bottom в моем CSS. Или я могу использовать сокращение CSS для свойства padding и включить три значения: первое значение будет представлять верхнее заполнение, второе — левое и правое заполнение, а третье — нижнее заполнение.
Ниже приведен код CSS, использующий сокращенный метод:
См. текст с вертикальным центрированием пера с использованием отступов CSS от HubSpot (@hubspot) на CodePen.
Вот результат:
Вертикальное центрирование текста с использованием свойства CSS Line-Height
Чтобы вертикально центрировать текст внутри элемента, вы также можете использовать свойство CSS line-height.
Вам нужно будет установить свойство со значением, равным высоте элемента контейнера.
Вот CSS:
См. текст с вертикальным центрированием пера с использованием свойства CSS Line-Height от HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование текста по вертикали с использованием свойств CSS Position и Transform
Другой метод центрирования текста по вертикали на странице требует свойства CSS position и свойства transform.
Для начала установите относительную позицию блока, содержащего текст. Затем вы хотите стилизовать абзац внутри div. Во-первых, установите для него абсолютное положение, чтобы оно не вписывалось в обычный документооборот. Затем установите свойства left и top на 50%. Это говорит браузеру выровнять левый и верхний край абзаца с центром страницы по горизонтали и вертикали (т.е. 50% вправо и вниз по странице).
Проблема в том, что мы не хотим, чтобы края абзаца выровнялись по середине страницы — мы хотим, чтобы центр абзаца выровнялся посередине страницы.
Здесь на помощь приходит свойство преобразования CSS. Используя метод преобразования, известный как метод translate(), мы можем перемещать абзац по осям X и Y. Чтобы действительно центрировать абзац, мы хотим переместить его на 50% влево и вверх от его текущего положения. Это скажет браузеру поместить центр абзаца в центр страницы.
Вот CSS:
См. текст с вертикальным центрированием пера с использованием свойств CSS Position and Transform от HubSpot (@hubspot) на CodePen.
Вот результат:
Центрирование текста по вертикали с использованием Flexbox
Flexbox — один из лучших методов для вертикального (и горизонтального) центрирования текста, поскольку он отзывчив и не требует вычисления полей.
Во-первых, вам нужно определить родительский контейнер — в данном случае div — как гибкий контейнер. Вы делаете это, устанавливая для свойства display значение «flex». Затем установите для свойства align-items и justify-content значение «center». Это укажет браузеру центрировать гибкий элемент (div внутри div) по вертикали и горизонтали.
Вот CSS:
См. текст с вертикальным центрированием пера с помощью Flexbox от HubSpot (@hubspot) на CodePen.
Вот результат:
Как использовать встроенный, внутренний или внешний CSS для центрирования текста?
Рассматривая различные варианты центрирования текста с помощью CSS, вы можете задаться вопросом, лучше ли использовать встроенный, внутренний или внешний CSS.
Встроенный CSS включается в открывающий тег элемента следующим образом:
Внутренний CSS включается между тегами
Внешний CSS относится к CSS во внешней таблице стилей, на которую вы ссылаетесь в теге заголовка вашего HTML-документа.
Итак, какой из этих вариантов вам подходит?
Если вы центрируете одноразовый элемент в сообщении блога или на странице, придерживайтесь встроенного CSS. Таким образом, вам не нужно создавать класс CSS или идентификатор только для этого элемента, который затем нужно будет добавить в таблицу стилей.
Если вы центрируете тип элемента на одной конкретной странице, вы можете использовать внутренний CSS для центрирования этого элемента, не переходя по одному. Просто не забудьте выбрать правильный селектор CSS, чтобы ваши изменения применялись.
Если вы хотите центрировать тип элемента по всему веб-сайту, используйте внешнюю таблицу стилей.
Центрирование текста на веб-сайте
Если у вас есть базовые знания HTML и CSS, вы можете легко центрировать текст на своих веб-страницах. Это может помочь вам создавать собственные макеты страниц, выделять ваш контент и привлекать пользователей, когда они просматривают ваш сайт.
Примечание редактора: этот пост был первоначально опубликован в ноябре 2020 г.
и обновлен для полноты информации.
оболочка gnome. Почему мои настройки обоев, плитка, масштабирование, центрирование, масштабирование, заливка или диапазон больше недоступны?
Еще пару месяцев назад, если я менял обои/фоновое изображение, я мог выбирать между мозаикой, масштабированием, центром, масштабом, заливкой или диапазоном. Эти параметры больше не отображаются в графическом интерфейсе для изменения фонового изображения.
- обои
- оболочка гнома
- фон
2
Эти параметры удалены из настроек обоев графического интерфейса по умолчанию (доступны из Settings application) в последних версиях GNOME 3 по какой-то причине.
В качестве альтернативы вы можете использовать другое приложение с графическим интерфейсом под названием (GNOME) Tweaks , чтобы получить эти дополнительные параметры.
Чтобы установить его, сначала запустите
sudo apt install gnome-tweaks.
Затем запустите Tweaks и перейдите в раздел « Appearance » в Ubuntu 18.04 и более поздних версиях (или раздел « Desktop » в Ubuntu 17.10). Вы получите возможность настроить фон и изображения экрана блокировки.
5
В Ubuntu 18.04 и более поздних версиях настройки можно найти на вкладке Tweak « Appearance » (вместо « Desktop »).
0
Вы можете использовать терминальный инструмент под названием gsettings .
gsettings list-schemasorg.gnome.desktop.background: Вариант 1org.gnome.desktop.screensaver(для экрана блокировки, на всякий случай): Вариант 2gsettings list-recursively org.
