Css какое свойство выравнивает текст в элементе

Css какое свойство выравнивает текст в элементе thumbnail

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

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

Одним из способов показать посетителю направленность и название сайта является
использование сплэш-страницы. Это первая страница, на которой, как правило,
расположена 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» width=»414″ height=»58″
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» «https://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 width=»100%» cellpadding=»5″>
<tr>
<td valign=»top» width=»75%» bgcolor=»#f0f0f0″>Колонка 1</td>
<td valign=»top» width=»25%» 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» «https://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 id=»col1″>Колонка 1</td>
<td id=»col2″>Колонка 2</td>
</tr>
</table>
</body>
</html>

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

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «https://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 width=»100%»>
<tr>
<td width=»100″></td>
<td align=»center»><img src=»images/formula.png» width=»289″ height=»158″
alt=»Формула 18.6″></td>
<td width=»100″ align=»right»>(18.6)</td>
</tr>
</table>
</body>
</html>

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

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

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

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

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

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

Читайте также:  Через какое время моторное масло теряет свои свойства

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

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «https://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 width=»100%» cellspacing=»0″ cellpadding=»4″>
<tr>
<td align=»right» width=»100″>Имя</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.

Источник

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

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

Проще всего с помощью 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».

А это inline-элемент. Здесь несколько оранжевых
строчек. Они выравниваятся
за счет установленной высоты строки блока-родителя.

.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» для центрирования контента внутри.

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

Lama

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

.example-wrapper7 img{
margin: auto;
}

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

Источник

Смотрите также указатель всех приёмов работы.

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

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

P { text-align: center }
H2 { text-align: center }

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

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

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

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

P.blocktext {
margin-left: auto;
margin-right: auto;
width: 6em
}

<P class=»blocktext»>Этот довольно …

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

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

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }

<IMG class=»displayed» src=»…» alt=»…»>

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

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

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

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

DIV.container {
min-height: 10em;
display: table-cell;
vertical-align: middle }

<DIV class=»container»>
<P>Этот маленький абзац…
</DIV>

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

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

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

Читайте также:  Какие бывают свойства умножения

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

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

<div class=container3>
<p>Этот абзац…
</div>

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

div.container3 {
height: 10em;
position: relative } /* 1 */
div.container3 p {
margin: 0;
position: absolute; /* 2 */
top: 50%; /* 3 */
transform: translate(0, -50%) } /* 4 */

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

  1. Сделайте контейнер относительно позиционированным
    (position: relative), что превратит его в контейнер для абсолютно
    позиционированных элементов.

  2. Сам элемент сделайте абсолютно позиционированным
    (position: absolute).

  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
    (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

  4. Используйте translate, чтобы переместить элемент вверх на
    половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
    указывают на высоту самого элемента.)

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

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

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

div.container5 {
height: 10em;
display: flex;
align-items: center }
div.container5 p {
margin: 0 }

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

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

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

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

<div class=container4>
<p>Центр!
</div>

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

div.container4 {
height: 10em;
position: relative }
div.container4 p {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }

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

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

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

div.container6 {
height: 10em;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }

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

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

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

<html>
<style>
body {
background: white }
section {
background: black;
color: white;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<h1>Красиво выровнен по центру</h1>
<p>Этот текстовый блок выровнен вертикально по центру.
<p>И горизонтально, если окно достаточно широкое.
</section>

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

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

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

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

Источник