Div align center: Атрибут align | htmlbook.ru

Leave a Comment / Разное / By /

Атрибут align | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.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/Атрибут align (Элемент div)

Синтаксис

(X)HTML

<div align="[значение]"> ... </div>

Описание

Атрибут / параметр align (от англ. «alignment» ‒ «выравнивание») задаёт горизонтальное выравнивание содержимого элемента div.

CSS

Аналог: text-align: <выравнивание>;

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0—
3.2DIV and CENTER
4.017.5.4 Grouping elements: the DIV and SPAN elements
align = left|center…[1]
DTD: Transitional Strict Frameset
5.04.4.13 The div element
5.14.4.14. The div element
XHTML
1.0Extensible HyperText Markup Language[1]
DTD: Transitional Strict Frameset
1. 1		Extensible HyperText Markup Language
  • [1] ‒ помечен как «устаревший».

Значения

center
Выравнивает содержимое по середине.
justify
Выравнивает содержимое по левому и по правому краю.
left
Выравнивает содержимое по левому краю.
right
Выравнивает содержимое по правому краю.

Значение по умолчанию: для текста выводимого слева на право ‒ «left»; для текста выводимого справа на лево ‒ «right».

Пример использования

Листинг кода

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title>Параметр align (Элемент div)</title>
<link type=»text/css» href=»ex-style. css» rel=»stylesheet» />
</head>
<body>
<h2>Пример использования атрибута «align»</h2>
<div align=»center»>Текст расположенный внутри элемента «div».</div>
</body>
</html>

Параметр align (Элемент div)

html — Как выровнять содержимое div по центру?

спросил

Изменено 4 года, 11 месяцев назад

Просмотрено 9к раз

-1

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

 <дел>
<дел>
<дел>
<дел>
<дел>

Кажется, ничего не работает, text-align: center ничего не делает. Содержимое внутри трех разделов: форма mailchimp, логотип, форма mailchimp

  • html
  • css
  • twitter-bootstrap
  • bootstrap-4

6

text-align: center работает, только если выравниваемый элемент имеет display: inline-block .

Также text-align: center находится не в элементе, который вы выравниваете, а в родительском элементе, который вы выравниваете.

 .внутренний {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  цвет фона: красный;
  отображение: встроенный блок;
}

.внешний {
  цвет черного фона: желтый;
  ширина: 100%;
  выравнивание текста: по центру;
} 
 <дел>
<дел>