Разное

Как выровнять абзац по ширине по центру по левому краю: Выравнивание текста в абзаце — ONLYOFFICE

Содержание

Выравнивание текста | htmlbook.ru

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

Табл. 1. Способы выравнивания текста
Выравнивание по левому краюВыравнивание по правому краюВыравнивание по центруВыравнивание по ширине
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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 достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h2>. В примере 1 показано, как в подобном случае устанавливать выравнивание.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2> 
  <p align="right"><strong>Метод перебора</strong></p> 
  <p>Делим пустыню на ряд элементарных участков, размер которых совпадает 
  с габаритными размерами льва, но при этом меньше размера клетки.  Далее простым 
  перебором определяем участок, в котором находится лев, что автоматически приводит 
  к его поимке.</p>
  <p align="right"><strong>Метод дихотомии</strong></p>
  <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. 
  Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем 
  до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

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

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

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

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

Как выровнять текст в Word

В этой статье мы рассмотрим, как выровнять текст в ворде. В Microsoft Word доступно четыре типа выравнивания текста – выравнивание по левому краю, выравнивание по центру, выравнивание по правому краю и выравнивание по ширине. Для того чтобы выровнять текст в ворде, используются следующие кнопки на «Главной» вкладке в группе «Абзац»:

Как выровнять текст в Word – Кнопки для выравнивания текста в ворде

Итак, перейдем непосредственно к вопросу, как выровнять текст в ворде.

Как выровнять текст по левому краю

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

  • на вкладке «Главная» нажмите кнопку «Выровнять по левому краю»;
  • или нажмите сочетание клавиш Ctrl+L.

Как выровнять текст в Word – Выравнивание текста по левому краю

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

Текст абзаца считается выровненным по центру, если он находится в центре левого и правого полей. Для того, чтобы

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

  • нажмите кнопку «Выровнять по центру» на вкладке «Главная»;
  • или нажмите сочетание клавиш Ctrl+E.

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

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

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

  • на вкладке «Главная» нажмите кнопку «Выровнять по правому краю»;
  • или используйте сочетание клавиш Ctrl+R.

Как выровнять текст в Word – Выравнивание текста по правому краю

Как выровнять текст по ширине

Выравнивание по ширине равномерно распределяет текст между левым и правым полями. Выровненный по ширине текст делает края документа ровными и четкими.

Чтобы выровнять текст по ширине в вроде, используйте все те же способы:

  • кнопка «Выровнять по ширине» на вкладке «Главная»;
  • сочетание клавиш Ctrl+J.

Как выровнять текст в Word – Выравнивание текста по ширине

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

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

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

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

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

Выравнивание по ширине 

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

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

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

Как выровнять текст по ширине в ворде

Думаю, на этом, вопрос, как выровнять текст в ворде может быть закрыт.

CSS: центрирование объектов

CSS: центрирование объектов

См. также указатель всех советов.

Центрирование объектов

Обычная задача CSS — центрирование текста или изображений. По факту, Существует три вида центрирования:

  • Центрирующие строки текста
  • Центрирование блока текста или изображения
  • Центрирование блока или изображения по вертикали

В последних реализациях CSS вы также можете использовать функции из уровень 3, который позволяет центрировать абсолютно позиционированные элементы:

  • Центрирование по вертикали на уровне 3
  • Центрирование по вертикали и горизонтали на уровне 3
  • Центрирование в окне просмотра на уровне 3

Центрирование строк текста

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

P {выравнивание текста: по центру}
h3 { text-align: center } 

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

Все строки в этом абзаце по центру между полями абзаца, благодаря значению «центр» свойства CSS «выравнивание текста».

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

Иногда центрировать нужно не текст, а блок целиком. Или, говоря по-другому: мы хотим левого и правое поле должно быть равным. Способ сделать это — установить поля на «авто». Обычно используется с блоком фиксированной ширины, потому что, если сам блок гибкий, он просто возьмет на себя все доступная ширина. Вот пример:

P.блоктекст {
    поле слева: авто;
    поле справа: авто;
    ширина: 8em
}
...

Это скорее...

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

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

IMG.displayed {
    дисплей: блок;
    поле слева: авто;
    поле справа: авто }
...
... 

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

Центрирование по вертикали

Уровень CSS 2 не имеет свойства для центрирования элементов вертикально. Скорее всего, он будет на уровне CSS 3 (см. ниже). Но даже в CSS2 вы можете центрировать блоки по вертикали, комбинируя несколько характеристики. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы

может центрироваться по вертикали.

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

DIV.контейнер {
    минимальная высота: 10em;
    отображение: таблица-ячейка;
    вертикальное выравнивание: посередине}
...
<ДЕЛ>
  

Этот небольшой абзац...

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

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

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

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

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

Этот абзац…

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

div.container3 {
   высота: 10см;
     позиция: относительная  } /* 1 */
div.container3 р {
   маржа: 0;
     позиция: абсолютная;  /* 2 */
     верх: 50%;  /* 3 */
     transform: translate(0, -50%)  } /* 4 */ 

Основные правила:

  1. Сделайте контейнер относительно расположенным, , который объявляет это контейнер для абсолютно позиционированных элементов.
  2. Сделайте сам элемент абсолютно позиционированным.
  3. Поместите его на полпути вниз контейнера с «верхом: 50%». (Обратите внимание, что 50% здесь означает 50% высоты контейнера.)
  4. Используйте перевод, чтобы переместить элемент вверх на половину его собственной высоты. ( «50%» в «перевести (0, -50%)» относится к высоте элемента сам.)

В последнее время (примерно с 2015 года) стала применяться и другая техника доступны в нескольких реализациях CSS. Он основан на новом Ключевое слово «flex» для свойства «display». Это ключевое слово означает для использования в графических пользовательских интерфейсах (GUI), но вас ничто не останавливает от использования его в документе, если документ имеет правильная структура.

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

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

div.container5 {
  высота: 10см;
    дисплей: гибкий; 
    элементы выравнивания: по центру  }
div. container5 р {
  margin: 0 } 

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

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

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

По центру!

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

По центру!

Таблица стилей аналогична предыдущему примеру в отношении к вертикальному центрированию. Но теперь мы перемещаем элемент на полпути также по контейнеру, с «слева: 50%», и в то же время время переместите его влево на половину своей ширины в «перевести» трансформация:

div. container4 {
    высота: 10см;
    положение: относительное }
div.container4 р {
    маржа: 0;
    фон: желтый;
    положение: абсолютное;
    верх: 50%;
      осталось: 50%; 
      поле справа: -50%; 
    transform: translate(  -50%,  -50%) } 

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

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

По центру!

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

div.container6 {
  высота: 10см;
  дисплей: гибкий;
  выравнивание элементов: по центру;
    выравнивание содержимого: по центру  }
div.container6 р {
  margin: 0 } 

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

Центрирование в окне просмотра на уровне CSS 3

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


  <стиль>
    тело {
        фон: белый }
    раздел {
        фон: черный;
        цвет белый;
        радиус границы: 1em;
        набивка: 1em;
          позиция: абсолютная; 
          верх: 50%; 
          осталось: 50%; 
          поле справа: -50%; 
          преобразование: перевод (-50%, -50%)  }
  
  <раздел>
     

Хорошо по центру

Этот текстовый блок центрирован по вертикали.

По горизонтали тоже, если окно достаточно широкое.

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

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

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

(Использование «translate» для центрирования в окне просмотра было первым предложено «Чарли» в ответе на переполнение стека.)

Создан 5 мая 2001 г.;
Последнее обновление

Выравнивание, стили шрифтов и горизонтальные линейки в документах HTML

Выравнивание, стили шрифтов и горизонтальные линейки в документах HTML

 предыдущий следующий содержимое   элементы   атрибуты   индекс


Содержание

  1. Форматирование
    1. Цвет фона
    2. Выравнивание
    3. Плавающие объекты
      • Плавающий объект
      • Плавающий текст вокруг объекта
  2. Шрифты
    1. Элементы стиля шрифта: TT , I , Б , БОЛЬШОЙ , МАЛЫЙ , STRIKE , S и U элементы
    2. Элементы модификатора шрифта: FONT и BASEFONT
  3. Правила: HR элемент

В этом разделе спецификации обсуждаются некоторые элементы HTML и атрибуты, которые могут использоваться для визуального форматирования элементов. Многие из них устарел.

15.1 Форматирование

15.1.1 Фон цвет

Определения атрибутов

bgcolor = цвет [CI]
Устарело. Это Атрибут задает цвет фона для тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона холста для основной части документа. (элемент BODY ) или для таблиц (элемент ТАБЛИЦА , ТР , ТН и элементы ТД ). Дополнительные атрибуты для указания цвета текста могут быть используется с элементом BODY .

Этот атрибут устарел в пользу таблиц стилей для указания информации о цвете фона.

15.1.2 Выравнивание

Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы, д.) на холсте с атрибутом align . Хотя это атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений иногда отличается от элемента к элементу. Здесь мы обсуждаем только значение атрибут align для текста.

Определения атрибутов

выравнивание = слева|в центре|справа|по ширине [КИ]
Устарело. Это определяет горизонтальное выравнивание своего элемента относительно окружающий контекст. Возможные значения:
  • слева : текстовые строки выравниваются по левому краю.
  • center : текстовые строки располагаются по центру.
  • справа : текстовые строки выравниваются по правому краю.
  • по ширине : текстовые строки выравниваются по обоим полям.

Значение по умолчанию зависит от основного направления текста. Для текста слева направо по умолчанию align=left , а для текста справа налево значение по умолчанию align=right .

УСТАРЕВШИЙ ПРИМЕР:
В этом примере заголовок размещается по центру холста.

Как вырезать дерево

Используя CSS, например, вы можете добиться такого же эффекта следующим образом:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  h2 {выравнивание текста: по центру}
 
<ТЕЛО>
  

Как вырезать дерево

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

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  h2.wood {выравнивание текста: по центру}
 
<ТЕЛО>
  

Как вырезать дерево

УСТАРЕВШИЙ ПРИМЕР:
Аналогично, чтобы выровнять абзац по правому краю на холсте с помощью HTML align атрибут, который вы могли бы иметь:

...Много текста абзаца...

, что с CSS будет:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  P. mypar {выравнивание текста: вправо}
 
<ТЕЛО>
 

...Много текста абзаца...

УСТАРЕВШИЙ ПРИМЕР:
Чтобы выровнять ряд абзацев по правому краю, сгруппируйте их с помощью Элемент DIV :

...текст в первом абзаце...

...текст во втором абзаце...

...текст в третьем абзаце...

С помощью CSS свойство text-align наследуется от родительского элемента. поэтому можно использовать:

<ГОЛОВА>
 Как вырезать дерево
 <СТИЛЬ type="text/css">
  DIV.mypars {выравнивание текста: вправо}
 
<ТЕЛО>
 <ДЕЛ>
  <Р>  ...текст в первом абзаце... 
  

...текст во втором абзаце...

...текст в третьем абзаце...