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

Выравнивание текста

Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align , как показано в табл. 2.

Табл. 2. Выравнивание текста с помощью параметра align
Код HTML Описание
<p>Текст</p> Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
<p align="center">Текст</p> Выравнивание по центру.
<p align="left">Текст</p> Выравнивание по левому краю.
<p align="right">Текст</p> Выравнивание по правому краю.
<p align="justify">Текст</p> Выравнивание по ширине.
<nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr> Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr> .
<div align="center">Текст</div> Выравнивание по центру.
<div align="left">Текст</div> Выравнивание по левому краю.
<div align="right">Текст</div> Выравнивание по правому краю.
<div align="justify">Текст</div> Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.

Отличие между абзацем (тег <p> ) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div> .

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1> . В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

Результат примера показан на рис. 1.

Выравнивание текста по правому и левому краю

Рис. 1. Выравнивание текста по правому и левому краю

В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.

Как выровнять текст в Ворде?

Стандартно текст в Ворде начинается с одного и того же места. Иногда приходится изменять местоположение символов или выровнять их. В этом текстовом редакторе можно сделать текст, например, выровненным с какой-либо стороны или посередине листа. Рассмотрим подробнее как это сделать в Word. Инструкция будет актуальна для всех редакций программы начиная с выпуска 2007 года.

Способ 1: Как выровнять тескт — На вкладке «Главная» подраздел «Абзац»

В Word есть верхнее меню с элементами управления. С его помощью можно выровнять текст следующим образом:

абзац выравнивание

  1. Нажмите мышкой на желаемый абзац или часть или весь текст (Ctrl + A).
  2. На верхней панели переключитесь на раздел «Главная».
  3. В блоке «Абзац» найдите элементы управления выравнивания (4 кнопки с полосками разной длины и расположения).
  4. Выберите нужный вариант расположения текста (слева, по центру, справа, по ширине).

Способ 2: Как выровнять текст в Ворде с помощью горячих клавиш — быстрый способ выравнивания текста

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

  • По левому краю — Ctrl + L;
  • По центру — Ctrl + E;
  • По правому краю — Ctrl + R;
  • По ширине документа — Ctrl + J.

Так же потребуется кликнуть на нужный абзац или выделить текст.

Способ 3: Как выровнять тескт с помощью линейки

В Word есть такой элемент управления, как линейка. Она позволяет произвольно задавать размеры расположения текста. Чтобы выровнять текст в Ворде воспользуйтесь этим способом, следует сделать следующее:

линейка

  1. Активировать функцию линейки. Для этого требуется перейти в раздел «Вид» на верхней панели, затем в категории «Отображение» поставить галочку на пункте «Линейка».
  2. Нажать левой кнопкой мыши на желаемый абзац или выделить весь документ.
  3. С помощью линейки установить границы.

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

Способ 4: Окно панели «Абзац» поможет выровнять текст

При нажатии на правую кнопку мыши в окне Word, появится контекстное меню, воспользовавшись которым вы сможете поменять различные параметры текста. Среди прочего, в нем есть пункт «Абзац», в котором можно установить выравнивание. Чтобы воспользоваться этим способом, следует:

  1. Установить курсор на желаемый абзац или зажать Ctrl + A.
  2. Кликнуть правой кнопкой мыши по выделенному тексту.
  3. Выбрать среди предложенных вариантов «Абзац».
    меню абзац
  4. Откроется окно с параметрами. Сверху будет раздел «Общие», а в нем параметр «Выравнивание».
  5. Из выпадающего меню выберите нужный вариант.
    отступы и интервалы
  6. Нажмите «ОК».

Способ 5: Как выровнять текст вертикально по странице с помощью «Параметры страницы»

Окно «Параметры страницы» позволяет детально настраивать отображение документа. Таким образом можно легко изменять вертикальные границы документа.

Изменить вертикальное положение текста довольно просто, достаточно следовать данной инструкции:

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

  1. На верхней панели откройте вкладку «Макет».
  2. В категории «Параметры страницы» откройте настройки, нажав на иконку в правом нижнем углу интерфейса.
  3. В появившемся окне перейдите во вкладку «Источник бумаги». Выберите подходящий вариант из предложенных по вертикали: с центральным расположением элементов; по высоте; по нижнему краю; по верхнему краю.
  4. В категории «Страница» установите нужное значение для «Вертикальное выравнивание».
  5. Снизу выберите пункт для «Применить к».
  6. Нажмите «ОК».

Когда окно закроется, вертикальное положение текста поменяется. Если требуется отредактировать только часть документа, необходимо предварительно его выделить, а в конце в графе «Применить к» выбрать «к выделенным разделам».

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

Кроме простого текста, в Word можно создавать таблицы. Нередко в них, так же, необходимо выравнивание. Чтобы разместить символы по центру ячеек, следует:

  1. Выделить требуемые ячейки или всю таблицу. Она может быть как заполненной, так и нет. В последнем случае новый текст будет появляться по центру.
  2. В верхнем меню во вкладке «Главная» в категории «Абзац» нажмите на «По центру».

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

Также можно воспользоваться горячими клавишами. Для этого так же требуется выделить нужные ячейки, а после одновременно нажать Ctrl + E. Все способы выравнивания текста подходят для таблиц.

Настройка выравнивания абзаца

С помощью окна настроек абзаца, кроме непосредственного расположения текста, можно установить отступы. Таким образом так же можно выровнять документ. Этот способ похож на линейку, однако позволяет детальнее устанавливать границы. Отступы особенно удобны тогда, когда нужно установить конкретные значения выравнивания по сантиметрам. Так же можно настроить красную строку.

Отступ от левого поля

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

отступ слева

  1. Поставьте курсор на желаемый абзац или выделите часть текста.
  2. С помощью правой кнопки мыши вызовите контекстное меню.
  3. Выберите в списке «Абзац».
  4. В разделе «Отступ» выберите нужный вариант для параметра «Слева».
  5. Нажмите «ОК».

Окно настроек абзаца можно открыть через верхнюю панель управления. Для этого следует перейти во вкладку «Главная», а затем нажать на иконку в левом нижнем углу категории «Абзац».

Альтернативно воспользоваться этим способом можно на вкладке «Макет». В категории «Абзац» можно выставить отступы для левого и правого края. Однако контекстное меню позволяет это делать быстрее и удобнее.

Отступ от правого поля

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

  1. Выделите нужный фрагмент.
  2. Через вкладку «Главная» или с помощью контекстного меню откройте настройки «Абзаца».
  3. Установите размер отступа справа.
  4. Нажмите «ОК».

Выравнивание с помощью помощника

Во многих продуктах Microsoft есть помощник, который упрощает использование программы для новых или неопытных пользователей. Word не стал исключением. С помощью этой функции можно выровнять нужный фрагмент, не разбираясь в интерфейсе. Для этого:

  1. Выделите нужную часть статьи или нажмите на «Абзац».
  2. В верхней части программы найти иконку помощника в виде лампочки и надписи «Что вы хотите сделать?».
  3. Нажмите на вопрос, начните вводить «Выровнять».
  4. Из предложенных вариантов выберите нужный.

За счет большого количества инструментов, MS Word позволяет отредактировать внешний вид под любые требования. Способов выровнять текст в этой программе много, поэтому всегда можно настроить документ так, как нужно. С помощью горячих клавиш можно быстро установить требуемые параметры, а для более детальных настроек стоит воспользоваться отступами или окном «Абзац».

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

Эта статья предназначена для людей с нарушениями зрения или с когнитивными нарушениями, использующих программы чтения с экрана, например Экранный диктор корпорации Microsoft, JAWS или NVDA с продуктами Microsoft 365. Эта статья входит в набор содержимого поддержки средства чтения с экрана Microsoft 365, где содержатся дополнительные сведения о специальных возможностях в наших приложениях. Общие справочные сведения доступны на главной странице службы поддержки Майкрософт или в статье Исправления и обходные пути для недавних проблем в Office.

Используйте Word клавиатурой и экранным устройством для изменения выравнивания текста в документах. Мы проверили эту функцию с использованием экранного диктора, JAWS и NVDA, но она может работать и с другими средствами чтения с экрана, если они соответствуют общепринятым стандартам и методам для специальных возможностей. Вы узнаете, как быстро выровнять текст по центру, по правому или левому краю, а также настроить интервал между словами в абзаце так, чтобы левый и правый края были четными. Вы также узнаете, как выровнять страницу по вертикали.

Описание выравнивания в Word документах зависит от того, как работает устройство чтения с экрана. Возможно, вам потребуется настроить параметры подробности в окте чтения с экрана. Например, чтобы прослушать описание выравнивания текста в JAWS, нажмите клавиши INSERT+F. В дикторе нажмите клавиши+0. Дополнительные сведения см. в документации по средству чтения с экрана.

Декоративный значокВам нужны инструкции по выравниваению текста в Word, но не с помощью чтения с экрана? См. выравнивание текста по левую или правую страницу, выравнивание текстапо центру или по выравнивание на странице.

Новые возможности Microsoft 365 становятся доступны подписчикам Microsoft 365 по мере выхода, поэтому в вашем приложении эти возможности пока могут отсутствовать. Чтобы узнать о том, как можно быстрее получать новые возможности, станьте участником программы предварительной оценки Office.

Дополнительные сведения о средствах чтения с экрана см. в статье о работе средств чтения с экрана в Microsoft Office.

Каскадные таблицы стилей CSS советы & приёмы

Самый распространённый и (потому) самый лёгкий тип центрирования — это центрирование строк текста в абзаце или заголовке. Для этого CSS обладает свойством ‘text-align’:

которое отображает каждую строку в абзаце P или заголовке H2 по центру между полями, вот так:

Все строки в этом абзаце выровнены по центру полями абзаца. Это стало возможным благодаря значению ‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или, по-другому говоря: мы хотим, чтобы правое и левое поля были одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно используется для блоков с фиксированной шириной, потому что если блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот пример:

Этот довольно узкий блок текста центрирован. Заметьте, что строки внутри блока не центрированы (они выровнены влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования изображения: поместите его в собственный блок и примените свойства полей. Например:

Следующее изображение центрировано: some random image

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

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

Этот маленький абзац центрирован вертикально.

Центрирование по вертикали в CSS уровня 3

Уровень 3 CSS предлагает и другие возможности. На момент написания этой статьи (2014 год), хороший способ вертикального выравнивания блока без использования абсолютного позиционирования (что может приводить к частичному перекрытию текста) всё ещё обсуждается. Но если вам известно, что частичное перекрытие текста не станет проблемой в вашем документе, вы можете использовать свойство ‘transform’, чтобы выровнять по центру абсолютно позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

таблица стилей выглядит так:

  1. Сделайте контейнер относительно позиционированным (position: relative), что превратит его в контейнер для абсолютно позиционированных элементов.
  2. Сам элемент сделайте абсолютно позиционированным (position: absolute).
  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’. (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
  4. Используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’ указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких реализациях CSS стала доступна новая техника. Она основана на новом ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово предназначено для использования в графическом интерфейсе пользователя (GUI), но ничто не мешает вам использовать его в документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.

Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

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

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных элементов является область просмотра. (В случае c браузером это окно браузера). Таким образом, центрирование элемента в области просмотра не вызывает сложности. Далее приведен полный пример. (В этом примере использован синтаксис HTML5.)

Вы можете увидеть результат в отдельном документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left: 50%’. Правило ‘left’ уменьшает доступную для элемента ширину на 50%. Поэтому визуализатор постарается сделать линии длиною не более половины ширины контейнера. Указав на то, что правое поле элемента находится правее на ту же самую величину, отметим, что максимальная длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое предложение находится на одной строке, когда окно достаточно широкое. Только тогда, когда окно слишком узкое для всего предложения, это предложение будет разбито на несколько строк. Когда вы удалите правило ‘margin-right: -50%’ и снова измените размер окна, вы заметите, что предложения будут уже разбиты, хотя окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

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

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