Home-theater-designers
Одной из первых функций, о которой все разработчики узнали, когда приступили к обработке текста, было выравнивание текста. Этот крошечный инструмент был жизненно важен как для профессиональных наборщиков, так и для дизайнеров листовок-любителей. Неудивительно, что CSS поддерживает выравнивание текста, когда дело касается веб-дизайна.
В выравнивание текста свойство вместе с одним или двумя другими, контролирует, как элемент горизонтально выравнивает свой текст. Помимо базовых функций, браузеры постепенно реализуют все больше спецификаций, но полная поддержка варьируется. Узнайте, как выравнивать текст и какие функции сегодня поддерживают обычные браузеры.
Основы свойства CSS text-align
Выравнивание - один из самых известных терминов в типографике. В контексте CSS выравнивание текста относится к горизонтальному выравниванию.
Выравнивание текста по горизонтали применяется только к блочным контейнерам. Это элементы полной ширины, такие как абзацы и div. С помощью выравнивание текста свойство встроенного элемента, такого как в не будет иметь никакого эффекта. Вы также можете выровнять элементы списка и ячейки таблицы:
мой заказ на Amazon не прибыл
По умолчанию на языке с письмом слева направо (подробнее об этом позже) текст выравнивается по левому краю:
В CSS это то же самое, что:
p { text-align: left; }Или:
p { text-align: start; }Связанный: Что такое каскадные таблицы стилей и для чего используется CSS?
Вы можете использовать другие значения для выравнивание текста свойство для изменения горизонтального выравнивания. Наиболее распространенные значения знакомы из текстовых редакторов:
text-align: left
text-align: center
text-align: rightИспользуйте выравнивание для выравнивания левого и правого краев
Еще одно распространенное значение для выравнивание текста является оправдывать . Браузеры добавляют пространство к выровненному по ширине тексту, так что каждая строка расширяется, чтобы заполнить доступное пространство:
Когда вы выравниваете текст, последняя строка может быть сложной. Поскольку он может быть очень коротким (возможно, всего одно слово), размещение его по всей ширине может быть некрасивым. По умолчанию даже выровненный текст выравнивает последнюю строку по левому краю.
у вас должен быть интернет-провайдер, чтобы получить Wi-Fi?
Иногда вам может понадобиться другой эффект. Реализации браузеров догоняют спецификацию, но возможны два подхода.
В оправдать-все Значение должно означать, что браузеры обрабатывают последнюю строку, как и все остальные, и растягивают ее на всю ширину. Однако на момент написания ни один браузер не поддерживает это значение. Вы можете проверьте caniuse, чтобы увидеть, делают ли они когда вы читаете эту статью.
Другое свойство CSS, текст-выравнивание-последний , более гибкий и имеет лучшую поддержку. Вы можете относиться к нему примерно так же, как выравнивание текста , но это относится только к последней строке:
Браузерная поддержка этого свойства лучше, но не идеальна. Опять таки, проверьте caniuse, прежде чем использовать его . Если браузер не распознает это свойство, он проигнорирует его.
Выравнивание текста и направление чтения
Возможно, вы работаете с языком, например арабским или ивритом, который читается справа налево. CSS использует направление свойство, чтобы указать это, например:
direction: rtl;Эти языки обычно по умолчанию выравнивают текст по правому краю.
Вместо того, чтобы указывать левый / Правильно , предпочтительный способ выравнивания текста использует значения Начните а также конец . Это указывает, должен ли текст выстраиваться в начале каждой строки или в конце. На языках с письмом слева направо Начните эквивалентно левый . В языке с письмом справа налево текст начинается справа и заканчивается слева.
как переместить страницу в слове
С использованием Начните или конец означает, что независимо от направления текста, выравнивание согласовано.
Как элементы наследуют свойство text-align
Вы должны знать, что выравнивание текста собственность наследуется. Например, если вы установите его на тело элемент, он будет применяться ко всем элементам на странице. Конечно, вы можете переопределить его для любого элемента.
Использование свойства text-align для управления макетом
Вы можете использовать выравнивание текста Свойство CSS, определяющее, как браузеры размещают текст по горизонтали. Наиболее распространенные ценности: левый , Правильно , центр , а также оправдывать . Это довольно просто, хотя оправдывать вносит некоторую сложность.
Вы должны экономно использовать выравнивание текста. На рекламных щитах и плакатах выравнивание по центру может быть уместным, но это может затруднить чтение более длинных блоков текста. Обоснование обычно более читабельно, когда строки текста длиннее. Выравнивание коротких столбцов текста по ширине может создать некрасивый интервал.
В выравнивание текста Свойство - одно из многих свойств CSS, обеспечивающих полезное форматирование и базовое позиционирование.
Делиться Делиться Твитнуть Эл. адрес 10 простых примеров кода CSS, которые вы можете изучить за 10 минутНужна помощь с CSS? Попробуйте для начала эти базовые примеры кода CSS, а затем примените их к своим собственным веб-страницам.
Читать далее Похожие темы- Программирование
- Веб-разработка
- Веб-дизайн
- CSS
Бобби - энтузиаст технологий, проработавший разработчиком программного обеспечения большую часть двух десятилетий. Он увлечен играми, работает редактором обзоров в Switch Player Magazine и занимается всеми аспектами онлайн-публикации и веб-разработки.
Ещё от Bobby JackПодписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
Нажмите здесь, чтобы подписаться