Расположение текста в css – Выравнивание текста в CSS

Содержание

text-align | htmlbook.ru

CSS	Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
2.1	6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+
3			2.0+	11.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет горизонтальное выравнивание текста в пределах элемента.

Синтаксис

CSS2.1	`text-align: center \| justify \| left \| right \| inherit`
CSS3	`text-align: center \| justify \| left \| right \| start \| end`

Значения

center: Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
justify: Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
left: Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
right: Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится.
auto: Не изменяет положение элемента.
inherit: Наследует значение родителя.
start: Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end: Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   .content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

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

Рис. 1. Выравнивание текста в браузере Safari

Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

htmlbook.ru

Выравнивание текста по центру, ширине и по краям

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

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

right — выравнивает текст по правому краю.
center — выравнивает текст по центру.
justify — выравнивает текст по ширине, в таком тексте оба конца строки размещаются вплотную к внутренним краям элемента. Пробелы между словами в этом случае корректируются браузером так, что бы длина всех строк была строго одинаковая.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 { text-align:center; }
      p.date { text-align:right; }
      p.main { text-align:justify; } /*значение justify растягивание текста по ширине*/
      p { text-indent:30px; } /*задаем размер отступа для первой строки абзаца*/
    </style>
  </head>

  <body>
    <h2>Пример выравнивания текста</h2>
    <p>февраль, 2012</p>
    <p>Помимо выравнивания текста, для первой строки абзаца был задан небольшой 
    отступ, который визуально добавляет "красную строку" к тексту. Этот эффект очень 
	 пригодится на страницах с большими объемами текста, облегчая визуальное восприятие.</p>
  </body>
</html>

Попробовать »

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

С этой темой смотрят:

puzzleweb.ru

Свойства CSS для изменения текста

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

Свойство Font

font — универсальное свойство, в которое можно включать несколько характеристик, указывая их через пробел — такие как стиль, жирность, размер, размер шрифта.

font: italic 12px arial;

Но обычно свойства font расписывают отдельно:

font-family — указывается имя (тип) шрифта. Можно указать через запятую, тогда — если у пользователя нет 1-го шрифта, то применится следующий.

font-family: verdana, times new roman;

font-size — размер шрифта, можно указывать в px, em, процентах или через постоянные значения — xx-small, x-small, small, medium, large, x-large-xx-large.

font-size:1.3em;

font-style — выбор способа вида шрифта — курсив (italic), наклонный (oblique) и обычный (normal)

font-style: italic;

font-variant — определение строчных букв — нормальное (normal) и small-caps (строчные буквы, как уменьшенные заглавные)

font-variant: small-caps;

font-weight — определние жирности шрифта. Можно указывать от 100 до 900 или с помощью слов: bold, bolder, lighter и normal.

font-weight: bold;

Изменения между символами

letter-spacing — отступ между символами. Можно указывать в отрицательном значении в px, in, pt и т.п. Для обычного интервала — normal.

letter-spacing:5px;

line-height — отступ между строками. Можно указывать в px, % или normal. Нельзя указать отрицательное значение.

line-height:50%;

word-spacing — отступ между словами. Указывается в px, in, pt и т.п. или normal.

word-spacing:5pt;

Положение и декор текста

text-align — положение теста по центру (center), по левому (left) или по правому (right) краям:

text-align:center;

vertical-align — положение текста по вертикали, относительно родителя. Устанавливается с помощью слов:

bottom — по нижнему краю родителя
middle — по середине
top — по верхнему краю родителя
sub — текст показывается по нижнему индексу
super — текст располагается по верхнему индексу

Также можно указывать в мерах длины и процентах с учетом того, что при положительном значении — смещение вверх, а при отрицательном — вниз.

vertical-align:sub;

text-decoration — добавление декора к тексту с помощью подчеркивания снизу (underline), сверху (overline), перечеркивания (line-through) и мигание (blink). Значение none — отменяет декорирование, даже подчеркивание ссылок.

text-decoration:overline;

text-indent — определение отступа первой строки абзаца. Указывается в любой мере длины.

text-indent:20px;

text-shadow — тень к тексту. Сначала указывается смещение по x, затем по у и радиус размытия тени. В конце можно указать цвет тени.

text-shadow:2px 2px 5px red;

text-transform — управление заглавными и строчными буквами с помощью слов:

capitalize — у каждого слова 1-й символ заглавный
lowercase — все символы будут строчными
uppercase — все символы станут заглавными
none — по-умолчанию

text-transform:lowercase;

white-space — выбор отображения пробелов с помощью слов:

normal — значение по-умолчанию
nowrap — текст располагается в одну строку, перенос только с <br>
pre — учитываются все пробелы и переносы
pre-line — разрешаются переносы строк
pre-wrap — перенос строки, если не вмещается по ширине

Для знакомства с основными тегами для текста читайте статью из раздела верстки HTML.

spinch.net.ua

Выравнивание текста | 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. Выравнивание текста по правому и левому краю

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

htmlbook.ru

выравнивание текста по горизонтали — учебник CSS

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

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

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


p {
text-align: left;
}

Выравнивание элементов | htmlbook.ru

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

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

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1).

Пример 1. Центрирование рисунка

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    height: 100%; /* Высота таблицы */   
   } 
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td align="center"><img src="images/recipe.png" 
     alt="Рецепты HTML">
    </td>
   </tr>
  </table> 
 </body>
</html>

В данном примере выравнивание по горизонтали устанавливается с помощью параметра align=»center» тега <td>, а по вертикали содержимое ячейки можно не центрировать, поскольку это положение задано по умолчанию.

Чтобы высота таблицы устанавливалась как 100%, необходимо убрать <!DOCTYPE>, код при этом перестает быть валидным.

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

Выравнивание по горизонтали

За счет сочетания атрибутов align (горизонтальное выравнивание) и valign (вертикальное выравнивание) тега <td>, допустимо устанавливать несколько видов положений элементов относительно друг друга. На рис. 1 показаны способы выравнивания элементов по горизонтали.

Рис. 1. Выравнивание элементов по горизонтали

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

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

Для указания выравнивания содержимого ячеек по верхнему краю, для тега <td> требуется установить атрибут valign со значением top (пример 2).

Пример 2. Использование valign

<!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>
  <table cellpadding="5">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">Колонка 1</td>
    <td valign="top" bgcolor="#ffcc00">Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

В данном примере характеристики ячеек управляются с помощью параметров тега <td>, но тоже удобнее изменять через стили. В частности, выравнивание в ячейках указывается свойствами vertical-align и text-align (пример 3).

Пример 3. Применение стилей для выравнивания

<!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>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
   }
   #col1 {
    width: 75%; /* Ширина первой колонки */
    background: #f0f0f0; /* Цвет фона первой колонки */
   }
   #col2 {
    width: 25%; /* Ширина второй колонки */
    background: #fc5; /* Цвет фона второй колонки */
    text-align: right; /* Выравнивание по правому краю */
   }
   #col1, #col2 {
    vertical-align: top; /* Выравнивание по верхнему краю */
    padding: 5px; /* Поля вокруг содержимого ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>Колонка 1</td>
    <td>Колонка 2</td>
   </tr>
  </table> 
 </body>
</html>

Для сокращения кода в данном примере используется группирование селекторов, поскольку свойства vertical-align и padding применяются одновременно к двум ячейкам.

Выравнивание по нижнему краю делается аналогично, только вместо значения top используется bottom.

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

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

Рис. 2. Добавление формулы в документ

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

Пример 4. Выравнивание формулы

<!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> 
  <table>
   <tr>
    <td></td>
    <td align="center"><img src="images/formula.png" 
      alt="Формула 18.6"></td>
    <td align="right">(18.6)</td>
   </tr>
  </table> 
 </body>
</html>

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

Выравнивание элементов формы

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

Рис 3. Расположение полей формы и текста

Чтобы текст возле полей формы был выровнен по правому краю, а сами элементы формы — по левому, потребуется таблица с невидимой границей и двумя колонками. В левой колонке будет размещаться собственно текст, а в правой текстовые поля (пример 5).

Пример 5. Выравнивание полей формы

<!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>
  <form method="post" action="handler.php">
   <table cellspacing="0" cellpadding="4">
    <tr> 
     <td align="right">Имя</td>
     <td><input type="text" name="nickname" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right">E-mail</td>
     <td><input type="text" name="email" maxlength="50" size="20"></td>
    </tr>
    <tr> 
     <td align="right" valign="top">Комментарий</td>
     <td><textarea name="text" cols="35" rows="10"></textarea></td>
    </tr>
    <tr> 
     <td></td>
     <td><input type="submit" value="Добавить комментарий"></td>
    </tr>
   </table>
  </form>
 </body>
</html>

В данном примере, для тех ячеек, где требуется задать выравнивание по правому краю, добавлен атрибут align=»right». Чтобы надпись «Комментарий» располагалась по верхней границе многострочного текста, для соответствующей ячейки устанавливается выравнивание по верхнему краю с помощью атрибута valign.

htmlbook.ru

Как в css выровнять текст по центру: множество простых способов

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

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

Html и его детища <center> и align

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

Что касается валидации (данный термин подробно описан в статье «Как проверить html код на ошибки»), то в самой спецификации html осуждается использование <center>, так как для валидности необходимо использовать переходной <!DOCTYPE>.

Такой тип <!DOCTYPE> пропускает запрещенные элементы.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>CENTER</title>
  <meta charset=utf-8">
 </head>
 <body> 
 <center>
  <p>Этот контент будет расположен по центру.</p>
  </center>  
 </body> 
</html>

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <title>CENTER</title> <meta charset=utf-8″> </head> <body> <center> <p>Этот контент будет расположен по центру.</p> </center> </body> </html>

Теперь перейдем к атрибуту align. Он задает горизонтальное выравнивание объектов на страницах сайтов и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left), по правому краю (right), по центру (center) и по ширине текста (justify).

Ниже я приведу пример, в котором картинку и абзац расположу по центру.

<!DOCTYPE HTML>
<html>
 <head>
  <title>align</title>
  <meta charset=utf-8">
 </head>
 <body> 
  <p align ="center"><img src="http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski--speshite-ostalosy-dva-shhenka.jpg" alt="Щенок" align="middle"> Этот контент будет расположен по центру.</p>
 </body> 
</html>

<!DOCTYPE HTML> <html> <head> <title>align</title> <meta charset=utf-8″> </head> <body> <p align =»center»><img src=»http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski—speshite-ostalosy-dva-shhenka.jpg» alt=»Щенок» align=»middle»> Этот контент будет расположен по центру.</p> </body> </html>

Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.

В примере я использовал align=»middle». Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.

Инструменты центрирования в css

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

Итак, начнем с первого свойства центрирования текста — это text- align.

Оно функционирует так же, как и align в html разметке. Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit).

Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 5px double red;
    padding: 0 22px 0 22px;
   }
#l {
   text-align: right; }
#s {
   text-align: end; }
  </style>
 </head>
 <body>
  <div><p>Предложение справа</p>
      <p>Предложение c использованием end</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-align</title> <style> div { border: 5px double red; padding: 0 22px 0 22px; } #l { text-align: right; } #s { text-align: end; } </style> </head> <body> <div><p>Предложение справа</p> <p>Предложение c использованием end</p> </div> </body> </html>

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

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

Ключевое слово	Предназначение
baseline	Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у.
middle	Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя.
bottom	Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех.
top	Аналогично bottom, только с верхней частью объекта.
super	Делает символ надстрочным.
sub	Делает элемент подстрочным.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>vertical-align</title>
<style>
div{
  font-size: 4em;
  text-align:center;
  text-decoration: underline;
}
#A{vertical-align: top;}
#B{vertical-align: middle;}
#C{vertical-align: super;}
#D{vertical-align: sub;}
</style>
 </head>
 <body>  
  <div>
Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span>
  </div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>vertical-align</title> <style> div{ font-size: 4em; text-align:center; text-decoration: underline; } #A{vertical-align: top;} #B{vertical-align: middle;} #C{vertical-align: super;} #D{vertical-align: sub;} </style> </head> <body> <div> Ц<span>В</span>Е<span>Т</span><span>О</span><span>К</span> </div> </body> </html>

Отступы

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-indent</title>
  <style>
   #a { text-indent: 53px;    }
#b { text-indent: -43px;    }
div {
background: #FFDAB9;
width:35%;
font-size:29px;
margin-left: 30%;
padding-left:50px;
}
  </style> 
 </head> 
 <body>
<div>
   <p>Для создания красной строки нужно знать всего лишь один параметр.</p>
   <p>Им является простое свойство text-indent.</p>
</div>
 </body>
</html>

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>text-indent</title> <style> #a { text-indent: 53px; } #b { text-indent: -43px; } div { background: #FFDAB9; width:35%; font-size:29px; margin-left: 30%; padding-left:50px; } </style> </head> <body> <div> <p>Для создания красной строки нужно знать всего лишь один параметр.</p> <p>Им является простое свойство text-indent.</p> </div> </body> </html>

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

С уважением, Роман Чуешов

Загрузка…

Прочитано: 821 раз

romanchueshov.ru

Расположение текста в css – Выравнивание текста в CSS

text-align | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Объектная модель

Браузеры

Выравнивание текста по центру, ширине и по краям

Свойства CSS для изменения текста

Свойство Font

Изменения между символами

Положение и декор текста

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

выравнивание текста по горизонтали — учебник CSS

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

Выравнивание элементов | htmlbook.ru

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

Выравнивание по горизонтали

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

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

Выравнивание элементов формы

Как в css выровнять текст по центру: множество простых способов

Html и его детища <center> и align

Инструменты центрирования в css

Отступы

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

Рубрики

Рубрики