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

Как сделать текст в центре блока css

  • автор:

Выравнивание текста в CSS: свойство text-align

В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:

Как необходимо выровнять текст? Подходящее значение
По левому краю left
По правому краю right
По центру страницы/блока center
По ширине страницы/блока justify
Выравнивание текста по тому краю, с которого он начинается (то есть текст, идущий слева направо, выравнивается по левому краю) start
Выравнивание текста по противоположному краю (то есть текст, идущий слева направо, выравнивается по правому краю) end

Пример записи стиля:

Рекомендации по использованию стилей

Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине ( justify ) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .

На скриншотах показаны примеры использования различных значений для свойства CSS text-align:

Свойство text-align, горизонтальное выравнивание текста

Следующее свойство text-align описывает, как выравнивается текст внутри блока по горизонтали (на самом деле не только текст, но об этом в следующем задании).

Свойство может принимать следующие значения:

  1. left — выравнивание по левому краю блока, это значение по умолчанию;
  2. right — по правому краю блока;
  3. center — по центру блока;
  4. justify — по ширине блока, при этом слова в строке будут размещаться так, чтобы занять равномерно всё пространство строки (пробелы между словами в таком случае становятся неравномерными, так как браузер «растягивает» слова в строке).

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

HTML: 

Я текст внутри абзаца

CSS: p

На самом деле существует ещё два значения text-align : это выравнивание к началу блока start и выравнивание к концу блока end . Если вы попробуете применить эти значения, то увидите, что эффект от значения start совпадает со значением left , а end делает то же самое, что и right .

Но это не всегда так. Дело в том, что не во всех языках текст пишется слева направо. Например, в японском текст пишется сверху вниз, и в этом случае значения left и right уже не так логичны, как в «европейских» языках.

Именно чтобы сделать CSS-код универсальным для любых направлений написания текста и появились такие значения text-align . Кстати, для управления направлением текста есть специальное свойство — writing-mode.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Осваиваем CSS: выравнивание по центру

Использование CSS является наиболее оптимальным способом центрирования изображений, блоков текста и даже всего дизайна веб-страницы. Большинство свойств для HTML align стали доступны в CSS , начиная с версии 1.0 . Они отлично работают с CSS3 и современными веб-браузерами:

Обновлено: 2021-07-14 19:24:03 МЛ Мария Логутенко автор материала

Применение CSS — выравнивание по центру HTML

Применение CSS - выравнивание по центру HTML

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

CSS можно использовать, чтобы:

  • Центрировать текст;
  • Центрировать блочный элемент ( например, div );
  • Центрировать изображение;
  • Вертикально центрировать блок или изображение.

Много лет назад веб-дизайнеры могли использовать для центрирования изображений и текста. Но теперь этот тег признан устаревшим и больше не поддерживается современными браузерами. Это вызвано тем, что современные сайты должны иметь четкое разделение структуры и стилей.

Советы по центрированию с помощью CSS

HTML используется для создания структуры, а CSS определяет стили. Так как центрирование – это визуальная характеристика, то оно осуществляется с помощью каскадных стилей.

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

Не знаете как выровнять текст по центру CSS? Проще всего центрировать текст на веб-странице. Чтобы это сделать, нужно всего одно свойство: HTML text align :

p.center

С помощью этой строки кода каждый параграф с классом center будет центрирован горизонтально внутри своего родительского элемента.

Применения этого класса:

This text is centered.

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

Выровнять по центру CSS блоки контента

Блоками являются любые элементы на странице, которые устанавливаются как элементы уровня блока и имеют определенную ширину. Часто такие блоки создаются с помощью .

Наиболее распространенный способ центрирования блоков – это задать для левого и правого отступов значение auto :

div.center

Это сокращенная форма свойства margin установит для верхнего и нижнего отступа значение 0 , а левый и правый отступы будут использовать значение auto . Таким образом занимается все доступное место и делится равномерно между двумя сторонами, что равносильно HTML div align .

Применение в HTML:

This entire block is centered, but the text inside it is left aligned.

Поскольку блок имеет определенную ширину, он будет центрирован внутри содержащего его элемента. Текст, находящийся в этом блоке, будет выровнен не по центру, а по левому краю. Так как по умолчанию в браузерах текст выравнивается по левому краю. Чтобы выровнять по центру текст, используйте свойство text-align , которое мы описывали ранее.

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

Большинство браузеров отобразят изображения по центру при использовании свойства HTML text align . Но не стоит полагаться на этот метод, так как он не рекомендован W3C .

Но как выровнять картинку по центру CSS? Для этого следует явно указать браузеру, что изображение является элементом уровня блока. Вот код CSS для этого:

img.center

Вот HTML код для изображения, которое нужно центрировать:

Также можно центрировать объекты с помощью встроенного CSS :

Вертикальное центрирование элементов

HTML vertical align всегда было проблематичным в веб-дизайне, но с выходом спецификации CSS Flexible Box Layout Module в CSS3 , появилось решение для этой задачи.

Вертикальное выравнивание работает также как и горизонтальное, описанное выше. Свойство vertical-align со значением middle :

.vcenter

Недостатком этого подхода является то, что не все браузеры поддерживают CSS FlexBox . Если есть проблемы с более ранними версиями браузеров, W3C рекомендует центрировать текст вертикально в контейнере, используя следующий метод:

  • Поместите элементы, которые нужно центрировать, внутрь элемента-контейнера, такого как div ;
  • Задайте минимальную высоту элементу-контейнеру;
  • Объявите элемент-контейнер;
  • Установите для HTML vertical align значение middle .

.vcenter

 

This text is vertically centered in the box.

Вертикальное центрирование и ранние версии Internet Explorer

Существует несколько способов заставить IE центрировать объекты, а затем воспользоваться условными комментариями. Хорошая новость заключается в том, что в связи с недавним решением Microsoft отказаться от поддержки старых версий IE эти браузеры должны скоро исчезнуть, тем самым облегчив для веб-дизайнеров использование таких современных подходов к разметке как CSS FlexBox .

МЛ Мария Логутенко автор-переводчик статьи « Use CSS to Center Images and Other HTML Objects »

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

margin: auto работает только тогда, когда задана ширина для элемента. В данном случаи ширина тега h4 равна 100% от ширины родителя и margin не может его отцентровать!

17 мар 2016 в 19:43
@IgorTkachuk спасибо!
17 мар 2016 в 19:59

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

margin: auto; — выравнивает блок за счёт добавление отступов по краям, но так-как ваш блок на всю ширину, то отступы не добавляются, им просто не где быть.
введите сюда описание изображения
Видно что блок во всю ширину и отступов нету.
Вариант 1
Всё таки выравнивать блок h1 , задать ему не полную ширину.
введите сюда описание изображения
Ширина 75px и видны отступы и блок по центру, но не текст.
Вариант 2
Выравнивать сам текст внутри h1 : text-align: center — выравнивает текст в блоке h1 , а не сам блок.
введите сюда описание изображения
Блок во всю ширину, но текст по центру.

Отслеживать
ответ дан 18 мар 2016 в 13:00
1,923 2 2 золотых знака 18 18 серебряных знаков 36 36 бронзовых знаков

margin: auto; не работает потому что элемент h4 занимает всю ширину блока .block и ей как-бы негде ставить отступ.
Если попробуйте задавать элементу h4 например width:60px; то он выравнивается по центру блока .block .

Отслеживать
ответ дан 18 мар 2016 в 12:08
Shuhratjon Jumaev Shuhratjon Jumaev
702 1 1 золотой знак 6 6 серебряных знаков 23 23 бронзовых знака

Напиши : text-align:center; в .block

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

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