Как выровнять текст по центру?
Используйте стилевое свойство text-align со значением center , добавляя его к абзацу (селектору P ) или к определенному слою (пример 1).
Пример 1. Выравнивание текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Выравнивание по центру .text Современная образовательная парадигма, ратифицируя приоритет личностной ориентации педагогического процесса, в ходе которого осуществляется развитие природных задатков, заложенных в каждом индивидууме, требует переосмысления существующих традиционных форм и методов общеобязательного образования. Результат примера показан на рис. 1.
Рис. 1. Текст, выровненный по центру веб-страницы
В данном примере текст внутри слоя с именем text выравнивается по центру веб-страницы.
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Как выровнять текст по центру?
Для горизонтального выравнивания текста по центру используется стилевое свойство text-align со значением center . Чтобы такое выравнивание работало в нужных местах, можно создать класс с именем center и добавлять его к желаемым элементам (пример 1).
Пример 1. Выравнивание текста
Результат примера показан на рис. 1.
Рис. 1. Текст, выровненный по центру веб-страницы
В данном примере текст внутри с классом center выравнивается по центру веб-страницы.
См. также
- text-align
- Свойства текста в CSS
Выравнивание текста по центру CSS
Есть Owl Карусель, в которой нужно центрировать h2, p и a. Пишу text-align: center; — не работает. Как только не пробовал, всё равно тест не выравнивается. Возможно что-то мешает. Буду благодарен за помощь!
HTML:
Надпись 1
Описание первого слайда карусели
Читать дальше 
Надпись 2
Описание второго слайда карусели
Читать дальше Надпись 3
Описание третьего слайда карусели
Читать дальше
.owl-carousel < position: relative; >.owl-nav < position: absolute; width: 100%; top: 100px; >.owl-prev < left: 0; position: absolute; height: 100px; width: 50px; >.owl-next < right: 0; position: absolute; height: 100px; width: 50px; >.owl-dots < position: absolute; left: 48%; top: 270px; >.item < height: 300px; >.item h2, p, a < position: absolute; >.item h2
Отслеживать
задан 3 мая 2020 в 16:02
141 3 3 серебряных знака 18 18 бронзовых знаков
А это что .item h2, p, a
@Sevastopol’ Указал, элементы понесло куда-то. Когда уменьшаешь страницу элементы вообще пропадают. И плюс я почему-то не могу указывать значения для h2, p, и а вместе, приходится каждому элементу писать отдельно, иначе съезжают все элементы сайта, даже те, которые не относятся к карусели. Можно ли сделать как-то через text-align?
4 мая 2020 в 12:31
@Andrey Fedorov Без этого элементы не накладываются поверх слайда (изображения) карусели
4 мая 2020 в 12:32
в таком случае они не могут быть выровнены, так как у них нет родителя, относительно которого возможно было бы выравнивание с помощью text-align: center .
4 мая 2020 в 15:57
@Andrey Fedorov а они же находятся в div или это не то? Все 3 элемента обёрнуты в div с классом item. Может в его свойства что-либо прописать?
Выравнивание текста в 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: