Атрибут align | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Для изображений можно указывать их положение относительно текста или других изображений на веб-странице. Способ выравнивания изображений задается атрибутом align тега <img>.
Синтаксис
<img align="bottom | left | middle | right | top">
Значения
В табл. 1 перечислены возможные значение атрибута align и результат его использования.
Наиболее популярные значения — left и right, создающие обтекание текста вокруг изображения.
Значение по умолчанию
bottom
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!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>Тег IMG, атрибут align</title>
</head>
<body>
<p><img src="images/square.gif" alt="Квадрат"
align="right"> Этот текст обтекает рисунок по его левому краю.</p>
</body>
</html>
Примечание
Дополнительные значения absbottom, absmiddle, baseline и texttop понимаются браузерами, но не поддерживаются спецификацией HTML 4.x/XHTML 1.0.
Выравнивание элементов. align-items и align-self
Выравнивание элементов. align-items и align-self
Последнее обновление: 18.04.2017
Свойство align-items
Свойство align-items также выравнивает элементы, но уже по поперечной оси (cross axis) (при расположении в виде строки по вертикали, при расположении в виде столбца — по горизонтали). Это свойство может принимать следующие значения:
stretch: значение по умолчанию, при котором flex-элементы растягиваются по всей высоте (при расположении в строку) или по всей ширине (при расположении в столбик) flex-контейнера
flex-start: элементы выравниваются по верхнему краю (при расположении в строку) или по левому краю (при расположении в столбик) flex-контейнера
flex-end: элементы выравниваются по нижнему краю (при расположении в строку) или по правому краю (при расположении в столбик) flex-контейнера
center: элементы выравниваются по центру flex-контейнера
baseline: элементы выравниваются в соответствии со своей базовой линией
Выравнивание при расположении в строку:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox в CSS3</title> <style> .flex-container { display: flex; border:1px #ccc solid; height:5em; } .flex-start{ align-items: flex-start; } .flex-end{ align-items: flex-end; } .center{ align-items: center; } .baseline{ align-items: baseline; } .flex-item { text-align:center; font-size: 1em; padding: 1.2em; color: white; } .largest-item{ padding-top:2em; } .color1 {background-color: #675BA7;} .color2 {background-color: #9BC850;} .color3 {background-color: #A62E5C;} .color4 {background-color: #2A9FBC;} </style> </head> <body> <h4>Flex-start</h4> <div> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> </div> <h4>Flex-end</h4> <div> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> </div> <h4>Center</h4> <div> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> </div> <h4>Baseline</h4> <div> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> </div> </html>
Аналогично свойство работает при расположении в столбик. Например, изменим стили flex-контейнера следующим образом:
.flex-container { display: flex; border:1px #ccc solid; flex-direction:column; width:12em; }
Свойство align-self
Свойство align-self позволяет переопределить значение свойства align-items
для одного элемента.
Оно может принимать все те же значения плюс значение «auto»:
auto: значение по умолчанию, при котором элемент получает значение от свойства
align-items
, которое определено в flex-контейнере. Если в контейнере такой стиль не определен, то применяется значениеstretch
.stretch
flex-start
flex-end
- center
baseline
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox в CSS3</title> <style> .flex-container { display: flex; border:1px #ccc solid; justify-content: space-between; align-items: stretch; height:12em; } .flex-item { text-align:center; font-size: 1em; padding: 1.2em; color: white; } .item1 {background-color: #675BA7; align-self: center; } .item2 {background-color: #9BC850; align-self: flex-start;} .item3 {background-color: #A62E5C; align-self: flex-end;} .item4 {background-color: #2A9FBC; align-self: center;} </style> </head> <body> <h4>Align-self</h4> <div> <div>Flex Item 1</div> <div>Flex Item 2</div> <div>Flex Item 3</div> <div>Flex Item 4</div> </div> </html>
Здесь для flex-контейнера задано растяжение по высоте с помощью значения align-items: stretch;
. Однако каждый из элементов переопределяет это поведение:
Атрибут align | HTML | WebReference
Задаёт выравнивание содержимого колонок по горизонтали. Этот атрибут действует на все ячейки в колонке, в том числе и на заголовки таблицы, которые определяются элементом <th>. Чтобы управлять выравниванием содержимого отдельных колонок или ячеек воспользуйтесь стилями.
Данный атрибут устарел, взамен используйте стили.
Синтаксис
<col align="left | center | right | justify">
Значения
- left
- Выравнивание контента по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине.
Значение по умолчанию
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>COL, атрибут align</title>
</head>
<body>
<table border="1">
<col align="left">
<col span="3" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Примечание
Для изменения выравнивания содержимого колонок воспользуйтесь псевдоклассом :nth-child и свойством text-align, добавляя их к селектору td.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание в колонках</title>
<style>
table {
width: 100%; /* Ширина таблицы */
}
td {
border: 1px solid black; /* Рамка вокруг ячеек */
}
td:nth-child(1) {
text-align: left; /* Выравнивание по левому краю */
}
td:nth-child(2) {
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<table>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 19.03.2018
Редакторы: Влад Мержевич
Атрибут align | HTML | WebReference
Выравнивание заголовка текста по краю.
Это устаревший атрибут, взамен него используйте стилевое свойство text-align.
Синтаксис
<h2 align="left | center | right | justify">...</h2>
Значения
- left
- Выравнивание заголовка по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.
Значение по умолчанию
Пример
<!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>h2, атрибут align</title> </head> <body> <h2 align="center">Пространственные закономерности</h2> <p>Пространственные закономерности в строении рельефа и чехла плиоцен-четвертичных отложений обусловлены тем, что трубка взрыва полидисперсна.</p> </body> </html>
Результат данного примера показан на рис. 1.
Рис. 1. Заголовок, выровненный по центру
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 08.11.2016
Редакторы: Влад Мержевич
Атрибут align | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Выравнивание блока текста по краю.
Синтаксис
<p align="left | center | right | justify">...</p>
Значения
- left
- Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
- center
- right
- Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
- justify
- Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
Значение по умолчанию
left
Аналог CSS
text-align
Пример
HTML 4.01IECrOpSaFx
<!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>Тег P, атрибут align</title>
</head>
<body>
<p align="justify">Duis te feugifacilisi. Duis autem dolor in
hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit au gue duis dolore te feugat nulla
facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion
ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.
Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en
commodo consequat.</p>
</body>
</html>
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Атрибут align | htmlbook.ru
Атрибут align | htmlbook.ru Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Выравнивание содержимого контейнера <div> по краю.
Синтаксис
<div align="center | left | right | justify">...</div>
Значения
- center
- Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно.
- left
- Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст.
- right
- Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие сайты.
- justify
- Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами.
Значение по умолчанию
left
Аналог CSS
text-align
Пример
HTML 4.01IECrOpSaFx
<!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>Тег DIV, атрибут align</title>
<style type="text/css">
#layer1 {
background: #fc0;
padding: 5px;
}
#layer2 {
background: #fff;
width: 60%;
padding: 10px;
}
</style>
</head>
<body>
<div align="right">
<div align="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat.
</div>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание элементов с помощью атрибута align
О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует Друпал хостинг it-patrol© 2002–2020 Влад Мержевич, по всем вопросам пишите по адресу [email protected]
Подпишитесь на материалы сайта по RSS
Атрибут align | HTML | WebReference
Задаёт выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки. Если требуется применить разное выравнивание для каждой ячейки, воспользуйтесь стилями или используйте атрибут align для элемента <td> или <th>.
Данный атрибут устарел, взамен используйте стили.
Синтаксис
<tr align="left | center | right | justify | char">...</tr>
Значения
- left
- Выравнивание по левому краю.
- center
- Выравнивание по центру.
- right
- Выравнивание по правому краю.
- justify
- Выравнивание по ширине (одновременно по правому и левому краям).
Значение по умолчанию
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег TR, атрибут align</title>
</head>
<body>
<table border="1">
<tr align="center">
<td> ... </td>
<td> ... </td>
</tr>
</table>
</body>
</html>
Примечание
Для выравнивания содержимого ячеек по горизонтали используйте стилевое свойство text-align, добавляя его к селектору tr.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание по горизонтали</title>
<style>
table {
width: 600px;
border: 1px solid #000;
margin: auto;
}
tr {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td> ... </td>
</tr>
</table>
</body>
</html>
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 03.01.2017
Редакторы: Влад Мержевич