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

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

P { text-align: left; }

Значения 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:

Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left.
Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right.
Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо.
Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией).
Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.

Каждый верстальщик постоянно сталкивается с необходимостью выравнивания контента в блоке: по горизонтали или по вертикали. Есть несколько неплохих статей на этот счет, но все они предлагают много интересных, но мало практичных вариантов, из-за чего приходится тратить лишнее время, чтобы выделить главное. Решила подать эту информацию в той форме, которая удобна мне, чтобы больше не гуглить.

Выравнивание блоков с известными размерами

Проще всего с помощью CSS выровнять блоки, у которых заранее известна высота (для выравнивания по вертикали) или ширина (для горизонтального выравнивания).

Выравнивание при помощи padding

Иногда можно не центрировать элемент, а добавить ему границы свойством "padding ".

Например, есть картинка 200 на 200 пикселей, и требуется центрировать ее в блоке 240 на 300. Можем задать высоту и ширину внешнему блоку = 200px, и добавить по 20 пикселей сверху и снизу, и по 50 слева и справа.

.example-wrapper1 { background : #535E73 ; width : 200px ; height : 200px ; padding : 20px 50px ; }

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

Если для блока задано "position: absolute ", тогда его можно позиционировать относительно ближайшего родителя с "position: relative". Для этого нужно всем свойствам ("top ","right ","bottom ","left ") внутреннего блока присвоить одинаковое значение, а также "margin: auto".

*Есть нюанс: Ширина (высота) внутреннего блока + значение left (right, bottom, top) не должны превышать размеры родительского блока. Надежнее свойствам left (right, bottom, top) присваивать 0 (ноль).

.example-wrapper2 { position : relative ; height : 250px ; background : url(space.jpg) ; } .cat-king { width : 200px ; height : 200px ; position : absolute ; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; margin : auto ; background : url(king.png) ; }

Горизонтальное выравнивание

Выравнивание посредством "text-align: center"

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

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

.example-text { text-align : center ; padding : 10px ; background : #FF90B8 ; }

Стоит заметить, что это свойство будет работать не только для текста, но и для любых строчных элементов ("display: inline").

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

.example-wrapper3 { text-align : center ; background : #FF90B8 ; } .inline-text { display : inline-block ; width : 40% ; padding : 10px ; text-align : left ; background : #FFE5E5 ; }

Выравнивание блоков при помощи margin

Блочные элементы с известной шириной легко выравниваются по горизонтали, если установить им "margin-left: auto; margin-right: auto". Обычно используется сокращенная запись: "margin: 0 auto " (вместо ноля может быть любое значение). Но вот для выравнивания по вертикали такой способ не подойдет.

.lama-wrapper { height : 200px ; background : #F1BF88 ; } .lama1 { height : 200px ; width : 200px ; background : url(lama.jpg) ; margin : 0 auto ; }

Именно так стоит выравнивать все блоки, где это возможно (где не требуется фиксированное или абсолютное позиционирование) - он самый логичный и адекватный. Хоть это и кажется очевидным, но иногда видела устрашающие примеры с отрицательными отступами, поэтому решила уточнить.

Вертикальное выравнивание

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

Выравнивание свойством line-height

В том случае, когда в блоке только одна строка, можно добиться ее выравнивания по вертикали, применив свойство "line-height " и установив ему желаемую высоту. Для надежности стоит установить еще и "height", значение которого будет равно значению "line-height", потому что последние поддерживается не во всех браузерах.

.example-wrapper4 { line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; }

Так же возможно добиться выравнивания блока с несколькими строками. Для этого придется использовать дополнительный блок-обертку, и устанавливать высоту строки ему. Внутренний блок может быть многострочным, но обязательно "inline". К нему нужно применить "vertical-align: middle".

.example-wrapper5 { line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; } .example-wrapper5 .text1 { display : inline-block ; font-size : 14px ; line-height : 1.5 ; vertical-align : middle ; background : #FFFAF2 ; color : #FF9B00 ; text-align : center ; }

У блока обертки должно быть установлено "font-size: 0". Если не установить нулевой размер шрифта, то браузер добавит от себя несколько лишних пикселей. Также придется указать размер шрифта и высоту строки для внутреннего блока, ведь эти свойства наследуются от родителя.

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

Свойство "vertical-align " также действует на ячейки таблицы. C установленным значением "middle", контент внутри ячейки выравнивается по центру. Конечно, табличная верстка в наше время считается архаической, но в исключительных случаях можно симулировать ее, указав "display: table-cell ".

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

.one_product .img_wrapper { display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; } .one_product img { max-height : 169px ; max-width : 100% ; min-width : 140px ; display : block ; margin : 0 auto ; }

Следует помнить, что если у элемента установлено "float" отличное от "none", то он в любом случае будет блочным (display: block) - тогда придется использовать дополнительный блок-обертку.

Выравнивание дополнительным inline-элементом

И для inline-элементов можно применить "vertical-align: middle ". При этом все элементы с "display: inline ", которые находятся в одной строке, выровняются относительно общей центральной линии.

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

.example-wrapper6 { height : 300px ; text-align : center ; background : #70DAF1 ; } .pudge { display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : #fff ; width : 200px ; height : 200px ; } .riki { display : inline-block ; height : 100% ; vertical-align : middle ; }

Display: flex и выравнивание

Если Вас не сильно заботят пользователи Explorer 8 или заботят так сильно, что Вы готовы ради них вставить кусок лишнего javascript-a, то можно применять "display: flex". Flex-блоки отлично справляются с проблемами выравнивания, и достаточно написать "margin: auto" для центрирования контента внутри.

Пока что такой способ практически не встречался мне, но особых ограничений для него нет.

.example-wrapper7 { display : flex ; height : 300px ; background : #AEB96A ; } .example-wrapper7 img { margin : auto ; }

Ну вот и все, что я хотела написать про CSS выравнивание. Теперь центрирование контента не будет представлять собой проблему!

Здравствуйте! Продолжаем осваивать основы языка HTML. Посмотрим, что нужно писать, чтобы выровнять текст по центру, ширине или краям.

Переходя к делу, рассмотрим, как в HTML сделать текст по центру тремя разными способами. Последние два связаны непосредственно с таблицей стилей. Она может представлять собой файл CSS, который подключается к страницам сайта и задает их вид.

Способ 1 - прямая работа c HTML

На самом деле все достаточно просто. Смотрите пример ниже.

Выравнивание абзаца по центру.

Если требуется сдвинуть текстовые фрагменты иным образом, то вместо параметра «center» прописываем следующие значения:

• justify – выравнивание текста по ширине страницы;
• right – по правому краю;
• left - по левому.

По аналогии можно сдвинуть контент, который находится в заголовках (h1, h2), контейнере (div).

Способ 2 и 3 - использование стилей

Конструкцию представленную выше можно слегка трансформировать. Эффект будет таким же. Для этого нужно прописать представленный ниже код.

Текстовый блок.

В таком виде код прописывается непосредственно в HTML для выравнивания текстового контента по центру.

Есть еще альтернативный вариант добиться результата. Нужно будет проделать пару действий.

Шаг 1. В основном коде написать

Текстовый материал.

Шаг 2. В подключаемом файле CSS вписать следующий код:

Rovno {text-align:center;}

Отмечу, что слово «rovno» это все лишь название класса, который можно назвать и по-другому. Это остается на усмотрение программиста.

По аналогии в HTML можно запросто сделать текст по центру, ширине, а также выровнять по правому или левому краю страницы. Как видите, есть далеко не один вариант достичь цели.

Всего несколько вопросов:

• Делаете информационный некомерческий проект?
• Хотите, чтобы сайт хорошо продвигался в поисковых системах?
• Желаете получать доход в сети?

Если все ответы положительные, то просто посмотрите на о комплексном подходе к развитию сайта. Информация окажется особенно полезной, если он работает на CMS WordPress.

Хотелось бы подметить, что собственные сайты - это лишь один из множества вариантов сформировать пассивный или активный доход на просторах интернета. Мой блог как раз посвящен финансовым возможностям в сети.

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

Впереди опубликую еще не мало реально полезной информации. Оставайтесь на связи. При желании можете подписаться на обновления Workip на e-mail. Форма подписки расположена ниже.

Довольно часто людям просто лень или некогда изучать интерфейс программы Microsoft Word, поэтому и возникают вопросы вроде «Как выровнять текст в Ворде?» - что ж, давайте разбираться. Когда Вы набираете текст в данной программе, он в автоматическом режиме выравнивается по левому краю. Можно ли сместить его в центр? Или на правую сторону? Конечно же, да. Более того, Вы можете в центре страницы разместить заголовок (шапку документа), а сам текст выровнять по левому краю.

Учимся выравнивать текст в MS Word

В разделе «Главная» располагаются специальные кнопки, некоторые из которых отвечают за выравнивание текста по центру, левому и правому краям, а также по ширине документа.

К ним мы ещё вернёмся несколько позже, давайте для начала разберёмся с тем, как не стоит выравнивать текст.

Некорректное выравнивание текста в Ворде

Неопытные пользователи довольно часто начинают выравнивать текст так, как им нужно, подручными средствами – то есть, ставят лишние пробелы или тапают по кнопке «Tab». Такое выравнивание считается ошибочным, потому как расстояние от левой границы рассчитывается на глаз, что весьма неудобно при дальнейшем наборе текста или его редактировании. Более того, на глаз практически нереально сделать необходимый отступ, из-за чего некоторые документы могут не принять. В частности, это касается дипломов – ни один преподаватель не примет текст, напечатанный таким образом – нужно строго соблюсти все требования вплоть до отступов и выравнивания. К тому же, сам способ нельзя назвать удобным – приходится слишком много тапать по кнопкам проблем и Tab.

Одно дело, если это касается диплома. А что, если это и вовсе официальный документ? При таком подходе можно запросто потерять деловую репутацию. Именно поэтому для выравнивания текста следует использовать стандартные средства MS Word - кнопки, находящиеся в разделе «Главная».

Для проверки правильности оформления документа также есть специальная кнопка, нажав на неё, Вы увидите скрытые знаки, именно поэтому лучше изначально грамотно подойти к вопросу оформления текста.

После нажатия в тексте появятся непонятные знаки, множество точек и стрелок.

Точки – это пробелы, поставленные Вами. Стрелки – нажатия клавиши Tab, остальное для нас на данном этапе не имеет никакого практического значения. Таким образом, если Вы поставили слишком много пробелов подряд, чтобы выровнять текст так, как Вам нужно, при нажатии кнопки «Отобразить все знаки», Ваша оплошность тут же станет заметной – множество точек и стрелочек.

Для возвращения документа к прежнему виду следует ещё раз кликнуть по этой же кнопке.

Выравниваем текст стандартными средствами Microsoft Word

Итак, возвращаемся к тем самым четырём кнопочкам, представленным ранее.

Первая отвечает за выравнивание по левому краю, то есть, текст будет “примагничен” к левому краю;

Вторая отвечает за выравнивание по центру;

Третья отвечает за выравнивание по правому краю;

Четвёртая выравнивает его по ширине документа, то есть, распределяет текст равномерно между левым и правым краями, благодаря чему удаётся достичь чёткости и ровности краёв.

Как видите, всё предельно просто. Спешим Вас обрадовать, текст заново писать не придётся – выровнять его можно и после того, как он был напечатан. Выделяете необходимый участок с помощью мыши и кликаете по одной из кнопок.

Текст выравнивается при помощи атрибута CSS text-align , который может принимать следующие значения:

• center - по центру
• justify - по ширине
• left - по левому краю
• right - по правому краю

Атрибут text-indent задает отступ "красной строки" - первой строки нового абзаца.

Для форматирования текста используют еще такие атрибуты:

• line-height - высота строки. Возможные значения:
  • n px,pt,ex,em,in,mm,cm,pc
  • n %
• margin - отступ от внешнего края элемента до внутреннего края родительского элемента. Возможны варианты (margin-top; margin-left; margin-bottom; margin-right). Значения:
  • n px,pt,ex,em,in,mm,cm,pc
  • n %
• padding - отступ от внутреннего края элемента до его содержимого. Возможны варианты (padding-top; padding-left; padding-bottom; padding-right). Значения:
  • n px,pt,ex,em,in,mm,cm,pc
  • n %
• vertical-align - вертикальное выравнивание (актуально для таблиц). Значения:
  • top - выравнивание по верхней части
  • middle - выравнивание по середине
  • bottom - выравнивание по нижней части
  • text-top - выравнивание по верхнему краю текста
  • text-bottom - выравнивание по нижнему краю текста
• white-space - способ отделения слов друг от друга
  • normal
  • nowrap (переносы строк игнорируются)

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

Пример выравнивания текста: Пример №6

HTML-код страницы :

Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Еще три мощных атрибута для форматирования текста:

• line-height - определяет межстрочный интервал. Значение должно быть больше высоты шрифта, в противном случае значение автоматически подгоняется под высоту текста. Значения:
  • n px,pt,ex,em,in,mm,cm,pc
  • n %
• word-spacing - интервал между словами. Значения:
  • n px,pt,ex,em,in,mm,cm,pc
• letter-spacing - интервал между буквами. Значения:
  • n px,pt,ex,em,in,mm,cm,pc

Пример форматирования текста: Пример №7

HTML-код страницы :

Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

Теперь полученные знания применим во внешнем листе стилей, отформатировав тег абзаца:

Пример форматирования текста внешним листом стилей: Пример №8

HTML-код страницы :

Untitled

Золотое кольцо России

«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.

CSS файл :

body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;} H1 {color: green; font-size: 130%;} p {text-indent: 15px; font-size: 10pt; line-height: 150%; text-align: justify; letter-spacing: 7px;}