расположение текста html
как я могу задать расположение текста через PX (как картинку) к примеру width, hieght и тд. а не используя text-align. написал я очень криво, знаю, сам особо ничего не понимаю. у меня правда текст отображается немного по другому, чем если выполнить код (в самом низу и по центру)
body < background-color: black; >body * < border: 1px solid red; >.dance1 < width: 300px; height: 600px; position: absolute; top: 0; left: 200px; >.dance2 < width: 300px; height: 600px; position: absolute; top: 0; left: 1400px; >.logo < width: 700px; height: 300px; position: absolute; top: 0; left: 600px; >.test123
test 123
text — align
Выравниваем текст по левому или правому краю. А может быть по центру?
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Как пишется
- Подсказки
- На практике
- Андрей Резников советует
- Алёна Батицкая советует
Контрибьюторы:
- Светлана Коробцева ,
- Андрей Резников
Обновлено 15 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
text — align управляет выравниванием контента (к примеру текста) по горизонтали внутри родительского элемента.
Если это свойство не задано, то выравнивание определяется правилами текущего языка (значение атрибута lang у тега ), либо значением свойства direction ( ltr — слева направо, rtl — справа налево).
Как пишется
Скопировать ссылку «Как пишется» Скопировано
- start — выравнивание по тому краю, по которому принято в текущем языке (значение по умолчанию).
- end — по противоположному краю для текущего языка.
- left — по левому краю.
- right — по правому краю.
- center — по центру.
- justify — по ширине. Текст растягивается от левого до правого края.
- match — parent — по значению direction родителя.
Значение, поддержка для которого в будущем будет расширена:
- justify — all — тоже самое, что justify , но включая последнюю строку.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Значение свойства наследуется.
�� Значение по умолчанию — start .
�� При разработке приложений с интернационализацией используйте start и end вместо left и right .
�� Выравнивание текста нельзя анимировать при помощи transition ☹️
�� В случае необходимости выравнивания последней строки используйте text — align — last , значения свойства совпадают с text — align .
На практике
Скопировать ссылку «На практике» Скопировано
Андрей Резников советует
Скопировать ссылку «Андрей Резников советует» Скопировано
�� Свойство text — align можно использовать для выравнивания изображений.
Один из вариантов выравнивания картинки по горизонтали:
- Убедиться, что родитель является блочным элементом ( display : block ).
- Применить свойство text — align к родителю.
div class="parent"> img alt=". " src=". " class="image" /> div>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center;>.parent width: 100%; padding: 16px; /* Центрируем изображение */ text-align: center; >Открыть демо в новой вкладке + Развернуть
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Свойство text — align можно использовать не только для выравнивания текста в строчных элементах, но и для выравнивания строчно-блочных ( inline — block ) элементов внутри родителя.
С появлением флексбоксов такое решение теряет свою популярность, но знать о нём стоит.
Простая разметка из родительского блока и трёх строчно-блочных вложенных элементов:
������div class="parent"> div class="child">��div> div class="child">��div> div class="child">��div> div>.parent width: 80%; margin: 0 auto; padding: 25px;> .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold;>.parent width: 80%; margin: 0 auto; padding: 25px; > .child display: inline-block; /* Меняем отображение на строчно-блочное */ width: 125px; height: 125px; padding: 25px; text-align: center; /* Выравниваем текст внутри блоков */ font-size: 75px; line-height: 1; font-weight: bold; >Добавим элементу .parent свойство text — align : center и элементы .child выровняются по центру родителя:
А если попробовать распределить вложенные элементы равномерно по ширине родителя, задав text — align : justify ?
Ожидаемого поведения не получилось, и вот почему ��
�� У значения justify хитрая логика. Чтобы можно было равномерно распределить элементы внутри родителя нужно задать этому самому родителю пустой строчно-блочный псевдоэлемент с шириной 100%.
.parent::after content: ''; display: inline-block; width: 100%;>.parent::after content: ''; display: inline-block; width: 100%; >15 Выравнивание, стили шрифта
и горизонтальные линииbgcolor = color [CI] Не рекомендуется. Этот атрибут устанавливает цвет фона документа или ячеек таблицы.
Этот атрибут устанавливает цвет фона «канвы» тела документа (элемент BODY ) или таблицы (элементы TABLE , TR , TH и TD ). Дополнительные атрибуты, устанавливающие цвет текста, могут использоваться с элементом BODY .
Этот атрибут не рекомендуется использовать для определения цвета фона. Лучше использовать таблицы стилей.
15.1.2 Выравнивание
Можно выравнивать блок элементов (таблицы, изображения, объекты, параграфы и т.п.) на «канве» с помощью атрибута align . Хотя этот атрибут может быть установлен для многих элементов HTML, диапазон его значений может отличаться, в зависимости от элемента. Здесь мы обсуждаем только значение атрибута «выравнивание» для текста.
- left : строки текста выравниваются по левому краю;
- center : строки текста выравниваются по центру;
- right : строки текста выравниваются по правому краю;
- justify : строки текста выравниваются по обоим полям.
Значение по умолчанию зависит от базового направления текста. Для направления слева направо — это align=left , для направления справа налево — по умолчанию align=right .
НЕ РЕКОМЕНДУЕТСЯ:
Здесь заголовок центрируется.Что за прелесть эта мерзость!
Используя CSS (каскадные таблицы стилей), например, Вы можете достичь того же эффекта следующим образом:
Что за прелесть эта мерзость! H1Что за прелесть эта мерзость!
Учтите, что это будет действовать на все элементы H1 . Вы можете ограничить область видимости стиля, установив атрибут class элемента:
Что за прелесть эта мерзость! H1.woodНЕ РЕКОМЕНДУЕТСЯ:
также, для того, чтобы выровнять вправо параграф на «канве» атрибутом HTML align , Вы могли бы записать:. параграф текста.
что в таблице стиля могло бы быть:
Что за прелесть эта мерзость! P.myparНЕ РЕКОМЕНДУЕТСЯ:
Чтобы выровнять вправо несколько параграфов, сгруппируйте их элементом DIV :. текст первого параграфа. . текст второго параграфа. . текст третьего параграфа.В таблице стиля свойство выравнивания текста наследуется от предка, поэтому Вы можете использовать:
Что за прелесть эта мерзость! DIV.mypars. текст первого параграфа. . текст второго параграфа. . текст третьего параграфа..Чтобы выровнять по центру весь документ:
Что за прелесть эта мерзость! BODY . тело выровнено по центру.Элемент CENTER полностью эквивалентен определению элемента DIV с атрибутом align , установленным в «center». Элемент CENTER не рекомендуется .
15.1.3 Плавающие объекты
Изображения и объекты могут появляться непосредственно «in-line» или «всплывать» к одной из сторон страницы, изменяя временно поля текста, который может обтекать объект по любой его стороне.
«Всплывание» объекта
Атрибут align объектов, изображений, таблиц, фрэймов и т.п. заставляет объект прижиматься к левому или правому полю страницы. Плавающие объекты обычно начинают новую строку. Этот атрибут принимает следующие значения:
- left: прижимает объект к левому краю. Последующий текст обтекает объект справа.
- right: прижимает объект к правому краю. Последующий текст обтекает объект слева.
ПРИМЕР НЕ РЕКОМЕНДУЕМОГО ИСПОЛЬЗОВАНИЯ:
Пример показывает. как элемент IMG «всплывает» к левому краю «канвы».Некоторые атрибуты выравнивания также допускают значение «center», которое не вызывает всплывания, а центрирует объект по отношению к краям. В то же время, у элементов P и DIV , значение «center» вызывает центрирование содержимого элементов.
Обтекание текста вокруг объекта
Ещё один атрибут, определённый для элемента BR , управляет обтеканием текста вокруг «всплывающего» объекта.
- none: следующая строка начнётся нормально. Это значение по умолчанию.
- left: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- right: следующая строка начнётся в ближайшей строке под любым плавающим объектом у левого края.
- all: следующая строка начнётся в ближайшей строке под любым плавающим объектом у любого края.
Посмотрите на этот рисунок. Текст обтекает изображение по правому краю до обрыва строки элементом BR :
********* ------- | | ------- | image | -- | | *********
Если атрибут clear установлен в none , линия, следующая после BR , начнётся сразу под ним у правого края изображения:
********* ------- | | ------- | image | -- | | ------ *********
НЕ РЕКОМЕНДУЕТСЯ:
Если атрибут clear установлен в left или all , следующая строка появится так:********* ------- | | ------- | image | -- | | ********* -----------------
Используя таблицы стилей, Вы можете установить, чтобы все обрывы строки вели себя одинаково для объектов (изображений, таблиц и т.д.), «всплывая» у левого края. В таблице стилей Вы можете записать:
Чтобы определить такое поведение для конкретного элемента BR , нужно скомбинировать информацию о стиле и атрибут id :
. BR#mybr . ********* ------- | | ------- | table | --
15.2 Шрифты
Последующие элементы HTML специфицируют информацию о шрифте. Хотя они и не относятся к не рекомендуемым , их использование менее предпочтительно, чем таблиц стилей.
15.2.1 Элементы стиля шрифта : TT , I , B , BIG , SMALL , STRIKE , S и U
TT | I | B | BIG | SMALL "> %fontstyle; |%phrase; ) - - (%inline; )*> %fontstyle; |%phrase; ) %attrs; -- %coreattrs , %i18n , %events -- >
Начальный тег: необходим, Конечный тег: необходим
Атрибуты, определённые в другом месте
- id , class (идентификаторы документа )
- lang (язык ), dir (направление текста )
- title (название элемента )
- style (инлайн-стиль )
- onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydownonkeyup (внутренние события )
Представление элементов стиля шрифта зависит от пользовательского агента (ПА). Следующее описание является лишь информативным.
TT: моноширинный текст, телетайп. I: курсив. B: полужирный. BIG: «большой» шрифт. SMALL: «малый» шрифт. STRIKE и S: не рекомендуются, зачёркнутый текст. U: не рекомендуется, подчёркнутый.
Вот несколько примеров определения шрифта:
bold, italic, bold italic, teletype text, and big and small text.
Это будет отображено так:
Можно применить более сложные варианты отображения шрифтов, используя таблицы стилей. Чтобы отобразить голубой курсив в параграфе с помощью таблицы стилей (CSS):
P#mypar
Элементы стиля шрифта должны вкладываться соответствующим образом. Отображение вложенных элементов стиля шрифта зависит от ПА.
15.2.2 Элементы модификатора шрифта: FONT и BASEFONT
См. формальное определение в разделе Переходное ОТД .
- Целое число от 1 до 7. Устанавливает шрифт в определённый фиксированный размер, представление которого зависит от ПА. Не все ПА могут отобразить все семь размеров.
- Относительное увеличение размера шрифта. «+1» означает: на один размер больше. «-3» означает: на три размера меньше. Все размеры находятся в пределах шкалы от 1 до 7.
Атрибуты, определённые в другом месте
- id , class (идентификаторы документа )
- lang (язык ), dir (направление текста )
- title (название элемента )
- style (инлайн-стиль )
Элемент FONT изменяет размер шрифта и цвет текста своего содержимого.
Элемент BASEFONT устанавливает базовый размер шрифта (используя атрибут size ). Размер шрифта, определяемый FONT , является относительным по отношению к BASEFONT . Если BASEFONT не используется, размер базового шрифта составляет 3.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере показана разница между шрифтами семи размеров элемента FONT :size=1 size=2 size=3 size=4 size=5 size=6 size=7
Это может выглядеть так:
А это пример относительного изменения размера шрифта с использованием базового размера 3:
Базовый размер шрифта не применяется к заголовкам/headings, за исключением тех случаев, когда заголовки изменены с использованием относительного изменения размера в элементе FONT .
15.3 Горизонтальные линии: элемент HR
HR - O EMPTY -- горизонтальная линия --> %attrs; -- %coreattrs , %i18n , %events -- >
Начальный тег: необходим, Конечный тег: запрещён
- left : линия выравнивается влево.
- center : линия выравнивается по центру.
- right : линия выравнивается вправо.
По умолчанию align=center .
noshade [CI] Не рекомендуется. Если этот булев атрибут установлен, он требует, чтобы ПА отображал горизонтальную линию сплошным цветом, а не традиционно с двухцветной «тенью». size = pixels [CI] Не рекомендуется. Определяет высоту линии. Значение по умолчанию зависит от ПА. width = length [CI] Не рекомендуется. Определяет ширину линии. Ширина по умолчанию — 100%, т.е. линия растянута по ширине всей «канвы».
Атрибуты, определённые в другом месте
- id , class (идентификаторы документа )
- lang (язык ), dir (направление текста )
- title (название элемента )
- style (инлайн-стиль )
- onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (внутренние события )
Элемент HR отображает горизонтальную линию в ПА.
Величина свободного пространства под и над горизонтальной линией зависит от ПА.
НЕ РЕКОМЕНДУЕТСЯ:
В этом примере линия центрируется, размер установлен в половину доступной ширины между краями страницы. Верхняя линия имеет толщину по умолчанию, а две нижние — по 5 пикселов. Нижняя линия должна отображаться сплошным цветом без тени:Эти линии должны выглядеть примерно так:
Текст
Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.
На этой странице
Выравнивание текста
Легко выравнивайте текст по компонентам с помощью классов выравнивания текста. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки по ширине области просмотра, что и система сетки.
Текст с выравниванием по левому краю для всех размеров области просмотра.
Выровненный по центру текст на всех размерах области просмотра.
Текст с выравниванием по правому краю для всех размеров области просмотра.
Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.
Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.
Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.
Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.
p class="text-start">Текст с выравниванием по левому краю для всех размеров области просмотра.p> p class="text-center">Выровненный по центру текст на всех размерах области просмотра.p> p class="text-end">Текст с выравниванием по правому краю для всех размеров области просмотра.p> p class="text-sm-start">Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.p> p class="text-md-start">Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.p> p class="text-lg-start">Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.p> p class="text-xl-start">Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.p>Обратите внимание, что мы не предоставляем служебные классы для выравнивания текста по всей ширине. Хотя эстетически выровненный по ширине текст может выглядеть более привлекательно, он делает интервалы между словами более случайными и, следовательно, труднее читать.
Перенос текста и переполнение
Оберните текст классом .text-wrap .
Этот текст следует обернуть.
div class="badge bg-primary text-wrap" style="width: 6rem;"> Этот текст следует обернуть. div>Запретить перенос текста с помощью класса .text-nowrap .
Этот текст должен переполнять родительский.
div class="text-nowrap bd-highlight" style="width: 8rem;"> Этот текст должен переполнять родительский. div>Разрыв слова
Предотвратите разрушение макета ваших компонентов длинными строками текста, используя .text-break для установки word-wrap: break-word и word-break: break-word . Мы используем word-wrap вместо более обычного overflow-wrap для более широкой поддержки браузеров и добавляем устаревший word-break: break-word , чтобы избежать проблем с гибкими контейнерами.
p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>Обратите внимание, что разрыв слов на арабском языке невозможен, который является наиболее часто используемым языком RTL. Поэтому .text-break удаляется из нашего RTL-скомпилированного CSS.
Преобразование текста
Преобразование текста в компонентах с помощью классов капитализации текста.
Текст в нижнем регистре.
Текст в верхнем регистре.
p class="text-lowercase">Текст в нижнем регистре.p> p class="text-uppercase">Текст в верхнем регистре.p> p class="text-capitalize">Заглавный текст.p>Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.
Размер шрифта
Быстро изменить размер шрифта текста font-size . В то время как наши классы заголовков (например, .h1 – .h6 ) применяют font-size , font-weight и line-height , эти утилиты применяют только font-size . Размер этих утилит соответствует элементам заголовка HTML, поэтому по мере увеличения числа их размер уменьшается.
p class="fs-1">.fs-1 textp> p class="fs-2">.fs-2 textp> p class="fs-3">.fs-3 textp> p class="fs-4">.fs-4 textp> p class="fs-5">.fs-5 textp> p class="fs-6">.fs-6 textp>Настройте свой доступный font-size , изменив карту Sass $font-sizes .
Толщина шрифта и курсив
С помощью этих утилит можно быстро изменить font-weight или font-style . Утилиты font-style сокращенно обозначаются как .fst-* , а утилиты font-weight сокращаются как .fw-* .
Более жирный текст (относительно родительского элемента).
Текст с нормальной толщиной.
Текст с легкой толщиной.
Более легкий текст (относительно родительского элемента).
Текст с обычным шрифтом
p class="fw-weight-bold">Жирный текст.p> p class="fw-weight-bolder">Более жирный текст (относительно родительского элемента).p> p class="fw-weight-normal">Текст с нормальной толщиной.p> p class="fw-weight-light">Текст с легкой толщиной.p> p class="fw-weight-lighter">Более легкий текст (относительно родительского элемента).p> p class="fst-italic">Курсивный текст.p> p class="fst-normal">Текст с обычным шрифтомp>Высота линии
Измените высоту строки с помощью утилит .lh-* .
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.
p class="lh-1">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-sm">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-base">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-lg">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p>Моноширинный
Измените выделение на наш стек моноширинных шрифтов с помощью .font-monospace .
Это в моноширинном пространстве
p class="font-monospace">Это в моноширинном пространствеp>Сброс цвета
Сбросить цвет текста или ссылки с помощью .text-reset , чтобы он унаследовал цвет от своего родителя.
p class="text-muted"> Скрытый текст со a href="#" class="text-reset">ссылкой для сброса.a>. p>Оформление текста
Украшайте текст в компонентах классами оформления текста.
Под этим текстом есть линия.
В этом тексте проходит линия.
p class="text-decoration-underline">Под этим текстом есть линия.p> p class="text-decoration-line-through">В этом тексте проходит линия.p> a href="#" class="text-decoration-none">Текстовое оформление этой ссылки удалено.a>Sass
Переменные
// stylelint-disable value-keyword-case $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // stylelint-enable value-keyword-case $font-family-base: var(--#$variable-prefix>font-sans-serif); $font-family-code: var(--#$variable-prefix>font-monospace); // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins // $font-size-base affects the font size of the body text $font-size-root: null; $font-size-base: 1rem; // Assumes the browser default, typically `16px` $font-size-sm: $font-size-base * .875; $font-size-lg: $font-size-base * 1.25; $font-weight-lighter: lighter; $font-weight-light: 300; $font-weight-normal: 400; $font-weight-bold: 700; $font-weight-bolder: bolder; $font-weight-base: $font-weight-normal; $line-height-base: 1.5; $line-height-sm: 1.25; $line-height-lg: 2; $h1-font-size: $font-size-base * 2.5; $h2-font-size: $font-size-base * 2; $h3-font-size: $font-size-base * 1.75; $h4-font-size: $font-size-base * 1.5; $h5-font-size: $font-size-base * 1.25; $h6-font-size: $font-size-base;Карты
Утилиты с размером шрифта генерируются из этой карты в сочетании с нашим API утилит.
$font-sizes: ( 1: $h1-font-size, 2: $h2-font-size, 3: $h3-font-size, 4: $h4-font-size, 5: $h5-font-size, 6: $h6-font-size );API утилит
Утилиты шрифта и текста указаны в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.
"font-family": ( property: font-family, class: font, values: (monospace: var(--#$variable-prefix>font-monospace)) ), "font-size": ( rfs: true, property: font-size, class: fs, values: $font-sizes ), "font-style": ( property: font-style, class: fst, values: italic normal ), "font-weight": ( property: font-weight, class: fw, values: ( light: $font-weight-light, lighter: $font-weight-lighter, normal: $font-weight-normal, bold: $font-weight-bold, bolder: $font-weight-bolder ) ), "line-height": ( property: line-height, class: lh, values: ( 1: 1, sm: $line-height-sm, base: $line-height-base, lg: $line-height-lg, ) ), "text-align": ( responsive: true, property: text-align, class: text, values: ( start: left, end: right, center: center, ) ), "text-decoration": ( property: text-decoration, values: none underline line-through ), "text-transform": ( property: text-transform, class: text, values: lowercase uppercase capitalize ), "white-space": ( property: white-space, class: text, values: ( wrap: normal, nowrap: nowrap, ) ), "word-wrap": ( property: word-wrap word-break, class: text, values: (break: break-word), rtl: false ),- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.