text-align — Справочник CSS
schoolsw3.com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ Назад CSS Справочник Далее ❯
Пример
Установить выравнивание текста для различных элементов <div>:
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align:
justify;
}
Попробуйте сами »
Определение и использование
Свойство text-align определяет горизонтальное выравнивание текста в элементе.
| Значение по умолчанию: | left если направление слева направо, и right при направлении справа налево |
|---|---|
| Унаследованный: | да |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS1 |
| JavaScript синтаксис: | object. |
Поддержка браузеров
Числа в таблице указывают первая версия браузер, который полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| text-align | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
CSS Синтаксис
text-align: left|right|center|justify|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| left | Выравнивает текст по левому краю | Воспроизвести » |
| right | Выравнивает текст по правому краю | Воспроизвести » |
| center | Центрирует текст | Воспроизвести » |
| justify | Растягивает линии так, чтобы каждая линия имела одинаковую ширину (как в газетах и журналах) | Воспроизвести » |
| initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Другой пример выравнивания текста:
h2 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Текс
HTML DOM Справочник: Свойство textAlign
❮ Назад CSS Справочник Далее ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.
CSS СправочникBootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять
Условия к использованию,
Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
text-align: left, right, center, justify
Поддержка браузерами
| 12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство text-align указывает, каким образом будет выравниваться строчное содержимое (текст, изображения) по горизонтали, внутри родительского элемента контейнера (блок, ячейка таблицы, поле ввода формы).
Примечание: свойство text-align не выравнивает сам элемент контейнер к которому оно применено, оно оказывает эффект только на его строчное содержимое. Свойство не даст никакого эффекта, если его применить для выравнивания напрямую к строчному элементу.
| Значение по умолчанию: | left если направление текста слева направо, и right если направление текста справа налево |
|---|---|
| Применяется: | к блочным контейнерам (block, inline-block, table-cell, table-captions, list-item) |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.textAlign=»right» |
Синтаксис
text-align: left|right|center|justify|inherit;
Значения свойства
| Значение | Описание |
|---|---|
left |
Выравнивает текст по левому краю. |
right |
Выравнивает текст по правому краю. |
center |
Выравнивает текст по центру. (Каждая срока текста выравнивается относительно центра элемента, имея одинаковые расстояния до краёв элемента с обеих сторон строки.)
|
justify |
Растягивание текста по ширине. Таким образом каждая строка текста имеет одинаковую ширину (как в газетах или журналах), растягиваясь от одного края элемента до другого. |
inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
text-align:
left
right
center
justify
CSS свойство text-align позволяет управлять выравниванием текста внутри любого HTML элемента.
С помощью text-align можно выравнять текст по левому или правому краю элемента, центрировать каждую строку текста или растянуть текст от одного края элемента до другого (подобно абзацам печатных изданий).
div {
text-align: left;
}
Выравнивание текста CSS, оформление текста, преобразование текста, разрыв слов, пробелы, переполнение текста
Автор: Авинаш Малхотра
Обновлено
- ← Цвета CSS
- Вертикальное выравнивание CSS →
Оценка учебника по CSS от Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Средняя оценка: 5,0 на основе 69 отзывов
- Главная
- УСБ
org/ListItem»> Веб-дизайн Свойства текста CSS включает в себя все свойства, связанные с текстом, такие как text-align , text-decoration и т. д. Эти свойства могут работать с отдельными элементами, такими как Свойство Css Text Align используется для выравнивания текста в по левому краю , по центру , по правому краю и по ширине . Выравнивание текста Justify в основном используется в электронных газетах, блогах и новостных веб-сайтах для выравнивания текста как слева, так и справа. Justify добавляет дополнительный пробел между словами для выравнивания. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. Это выравнивание текста по ширине. Выравнивание текста автоматически выравнивается как по левому, так и по правому краю, путем добавления межсловного интервала в тексте. Это выравнивание по тексту. Выравнивание текста автоматически выравнивается как по левому, так и по правому краю, путем добавления межсловного интервала в тексте. Это выравнивание по тексту. Выравнивание текста автоматически выравнивается как по левому, так и по правому краю, путем добавления межсловного интервала в тексте. Это выравнивание по тексту. Выравнивание текста автоматически выравнивается как по левому, так и по правому краю, путем добавления межсловного интервала в тексте. Свойство Text Indent используется для изменения отступа по умолчанию текста css. Text-Indent изменяет положение первого слова первой строки в правильном или произвольном направлении. Если отступ текста отрицательный, он будет двигаться влево и выходить за пределы документа. Вот как работает свойство CSS Text indent. Отступ текста этого абзаца 100px. Вот как работает свойство CSS Text indent. Отступ текста этого абзаца 200px. Вот как работает свойство CSS Text indent. Отступ текста этого абзаца -100px.. Вот как работает свойство CSS Text indent. Вот как работает свойство CSS Text indent. Отступ текста этого абзаца составляет 200 пикселей. Вот как работает свойство CSS Text indent. Отступ текста этого абзаца составляет -50 пикселей. Избегайте text-indent в минусе. Украшение текста CSS добавить или удалить оформление текста, например подчеркивание , надчеркивание , сквозной штрих и нет . Оформление текста может иметь строку оформления текста , цвет оформления текста и стиль оформления текста. Текстовое оформление над линией Подчеркивание декоративного текста Текстовый декор сквозной Оформление текста нет Оформление текста над чертой Оформление текста подчеркивание Оформление текста через строку Оформление текста нет Стиль оформления текста сплошной Стиль оформления текста пунктиром Оформление текста с точками Text Decoration Style двойной Цвет декоративного текста Цвет декоративного текста Цвет декоративного текста Свойство CSS Text Transform используется для преобразовать текст из строчных в прописные , строчные в заглавные и прописные в строчные для алфавитов. Преобразование текста Заглавные буквы Преобразование текста в нижний регистр Преобразование текста в верхний регистр Преобразование текста Нет технический специалист технический специалист технический специалист технический специалист White Space свойство изменить поведение пробелов в тексте. В этом примере показано, как управлять пробелами с помощью свойства CSS white-space.
Это новая строка В этом примере показано, как управлять пробелами с помощью свойства css white-space.
Это новая линия В этом примере показано, как управлять пробелами с помощью свойства CSS white-space.
Это новая строка В этом примере показано, как управлять пробелами с помощью свойства css white-space.
Это новая строка В этом примере показано, как управлять пробелами с помощью свойства css white-space.
Это новая строка и т. д., или могут быть назначено родительскому элементу, exp , Список свойств текста
Выравнивание текста CSS
Выравнивание текста по умолчанию оставлено для многих языков. Только элементы уровня блока поддерживают свойство выравнивания текста . Это означает, что p, заголовки h2-h6, цитата, элементы поддерживают text align , а встроенные элементы уровня — нет. Но встроенный может наследовать текст выровнен по относительно родительского элемента. Выравнивание текста по левому краю, центру и правому краю
Выравнивание по тексту Значение левый выровнять текст по левому краю центр выровнять текст по центру справа выровнять текст по правому краю выравнивание Выровненный текст Примеры выравнивания текста CSS
Выравнивание текста по левому краю
Центр выравнивания текста
Выравнивание текста по правому краю
<стиль>
.
text-left {выравнивание текста: по левому краю;}
.текст-центр{выравнивание текста:центр;}
.text-right {выравнивание текста: вправо;}
Выровнять текст по левому краю
Выравнивание текста по центру
Выравнивание текста по правому краю
Выравнивание текста по ширине
Выравнивание текста по левому краю
слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка. Это выравнивание текста по левому краю. слева тип по умолчанию для английского языка Выравнивание текста по ширине
<стиль>
.текст-выравнивание{выравнивание текста:выравнивание;}
Пример текста.
Отступ текста
<стиль>
.text4 {текстовый отступ: 100 пикселей; красный цвет}
.text5 {отступ текста: 200 пикселей; цвет синий}
.text6{текстовый отступ:-50px; цвет:зеленый}
Отступ текста этого абзаца составляет 100 пикселей. Оформление текста
Оформление текста
текст-украшение Роль Пример над чертой создать линию над текстом подчеркивание создать строку под текстом сквозной зачеркнуть текст нет Удалить оформление текста по умолчанию. 
Пример оформления текста
<стиль>
.text5{строка-украшения-текста:верхняя черта;}
.text6 {строка оформления текста: подчеркивание;}
.text7 {строка оформления текста: сквозная;}
.text8 {строка оформления текста: нет;}
Оформление текста поверх линии
Подчеркивание оформления текста
Построчное оформление текста
Украшение текста нет
Стиль оформления текста
стиль оформления текста Значение Пример твердый создать сплошную линию пунктир создать пунктирную линию с точкой создать пунктирную линию двойной создать двойную линию Цвет оформления текста
цвет текста-декорации Значение Пример черный создать сплошную линию черным цветом красный создать сплошную линию красным цветом синий создать сплошную линию синим цветом 
<стиль>
h2{
оформление текста: подчеркивание красным пунктиром;
-webkit-text-decoration: подчеркните красным пунктиром;
}
Преобразование текста
<стиль>
.text9 {преобразование текста: заглавные буквы;}
.text10{преобразование текста:нижний регистр;}
.text11{преобразование текста:верхний регистр;}
.text12 {преобразование текста: нет;}
Пустое пространство
Значение по умолчанию нормальное. Мы можем изменить white-space на nowrap , pre , pre-line или pre-wrap . См. пример ниже