В таких программах, как, например, Microsoft Word вы наверняка встречали инструменты выравнивания текста по горизонтали. Выровнять текст можно по левому или по правому краю, по центру или по ширине. То же самое есть и в CSS – выравнивание текста производится с помощью свойства text-align и соответствующих значений, которые показаны в таблице:
Пример записи стиля:
P { text-align: left; }
Значения left, right и center Текст, выровненный по левой стороне, практически всегда хорошо выглядит на веб-страницах и удобно читается. Выравнивание по правому краю в европейских языках, как правило, используется редко, однако совсем бесполезным его назвать нельзя: такой стиль пригодится для красивого оформления подписей к фото или цитатам, выравнивания содержимого ячеек таблиц или небольших фрагментов текста. Для этих же целей часто используется значение center . Значение justify Выравнивание текста в CSS по ширине (justify) можно применять для печатных версий страниц, но не рекомендуется увлекаться этим стилем на веб-страницах, созданных для просмотра на мониторе. Почему? На первый взгляд – выровненный по ширине текст выглядит красиво и ровно, как колонка в газете. Но чтобы так растянуть текст, браузеру приходится добавлять дополнительное пространство между словами, вследствие чего в тексте могут образовываться некрасивые зазоры, затрудняющие чтение. В программах, предназначенных для подготовки данных к печати, происходит намного более тонкая настройка интервалов в тексте, а также нередко используется перенос слов, чего нет во многих браузерах. Поэтому необходимо проверять, как выглядит на веб-страницах текст, выровненный по ширине, и в первую очередь задавать себе вопрос: удобен ли он для чтения? Особенно это касается узких блоков текста (в т. ч. мобильных версий страниц). Значения start и end Значения start и end для свойства text-align внедрены в CSS3 и работают практически так же, как left и right , но есть разница. Применив значение start к тексту, который идет слева направо (LTR – left-to-right), выравнивание будет по левому краю (соответственно, для текста, идущего справа налево (RTL – right-to-left), выравнивание будет по правому краю). Логично, что значение end работает противоположным образом (то есть выравнивает по правому краю LTR-текст и по левому краю – RTL-текст). Эти два значения не поддерживаются некоторыми браузерами, включая Internet Explorer, поэтому, если нет острой необходимости в их применении, рекомендуем использовать значения left и right .На скриншотах показаны примеры использования различных значений для свойства CSS text-align:
Скриншот 1: выравнивание LTR-текста по левому краю при помощи значения start. Аналогичного вида можно добиться при помощи значения left.
Скриншот 2: выравнивание LTR-текста по правому краю при помощи значения end. Аналогичного вида можно добиться с помощью значения right.
Скриншот 3: выравнивание текста по ширине. При мелком шрифте и большой ширине страницы/блока такой вариант выравнивания текста на веб-странице смотрится приемлемо.
Скриншот 4: увеличен размер шрифта и уменьшена ширина блока по сравнению с предыдущим примером. Как видим, появились некрасивые зазоры в тексте (подчеркнуты красной линией).
Скриншот 5: два способа выравнивания текста на примере mobile-версии нашего учебника (слева – text-align: left, справа – text-align: justify). Попробуйте прочитать текст в обеих колонках и определить, какой вариант более комфортен для чтения.
Статья 6. Выравнивание текста в HTML странице (по левому краю, по центру, по правому краю и по ширине)
Дата создния: 2009-11-29
1.
Итак, правильно применив "тег-параграф" - , мы можем разместить текст по левому краю, по центру , по правому краю и по ширине страницы. Для этого внутри тега открытия вставляется атрибут align="left", align="center", align="right" или align="justify" соответственно.
В реальности это имеет такой вид:
Текст будет расположен по центру
Текст будет расположен по правому краю
А сейчас давайте применим выравнивание к нашему примеру. Я выровняю по центру слово "Привет!". Для этого выберем .
(Помните, что текст, который расположен внутри тега , будет отделен параграфом снизу и сверху от остального текста. И еще, для того, чтобы стать хорошим дизайнером сайтов, необходимо выучить не только HTML, а и CSS (стили), и много других программ)
Теперь сохраняем документ, обновляем документ в браузере и смотрим, что получилось:
Результат: Слово "Привет!" находится в новом параграфе по центру HTML странички.
(если же мы уберем из параграфа парамерт align="...", то текст по умолчанию станет по левому краю)
2. ...
Вторым способом Вы можете разместить текст только по центру . Но и здесь есть свое преимущество. Заключается оно в том, что текст не будет помещен в параграф. Для этого необходимо поместить его в тег
Это очень просто. Просмотрите изменения нашего примера, и все поймете (для наглядности я убрал тег
после закрывающего тега ):
Теперь сохраним текстовый файл, обновим браузер и посмотрим результат:
Результат: Текст расположен по центру без отступов снизу и сверху.
3. Выравнивание ...
Третий вариант, с помощью которого можно выровнять текст, это теги
Записывается он точно так же, как и теги :
Я, для наглядности, вставлю в пример произвольный текст, и применю к нему выравнивание по ширине, то есть от края до края страницы:
Теперь как обычно, сохраняем текстовый файл, обновляем браузер и смотрим результат:
Результат: Мы видим, что в отличие от тега
Тег
К текстовым элементам можно применять свойство vertical-align . Но оно производит вертикальное выравнивание не относительно внешнего элемента, а относительно его базовой линии. Поэтому для выравнивания текста это свойство использовать не удобно.
Ячейки таблицы
Свойства text-align и vertical-align можно использовать для выравнивания внутри ячеек таблицы. Для ячеек vertical-align принимает такие значения:
vertical-align: middle - по центру (значение по умолчанию)
vertical-align: top - по верхнему краю
vertical-align: bottom - по нижнему краю
Это свойство производит вертикальное выравнивание всего содержимого ячейки, включая текстовые и блочные элементы. А text-align применяется только к тексту. Пример:
Стиль:
11 |
td { border: 1px solid Red; width: 200px; height: 180px; } |
HTML код:
Если какому-то отступу установить значение auto , то отступ займёт всё доступное пространство. Это позволяет расположить блок справа. А если это значение указать левому и правому отступу, то пространство делится между ними пополам, и блок оказывается в центре.
До некоторого времени я, как и многие из вас, пользовался двумя способами:
- Первый способ основан на свойстве float. Левому блоку задаётся float: left, правому float: right
- Второй способ заключается в абсолютном позиционировании правого блока, с параметрами right: 0 либо left: 100%, margin-left: -(ширина блока)
Итак способ номер 3. Для начала код:
Собственно HTML
Copy Source | Copy HTML
- < div class ="wrap">
- < div class ="left">< a href ="#"> Левый блок a > div >< div class ="right">< a href ="#"> Правый блок a > div >
- div >
Собственно CSS
Copy Source | Copy HTML
- .wrap {
- width : 500px ;
- background : #555 ;
- height : 500px ;
- .left , .right {
- display : inline -block ;
- //display: inline;
- //zoom: 1;
- width : 100% ;
- margin-right : -100% ;
- vertical-align : bottom ;
- .right {
- text-align : right ;
- .left a , .right a { display : inline -block ; position : relative ; }
- .left a { width : 200px ; height : 100px ; background : green ; }
- .right a { width : 100px ; height : 200px ; background : pink ; }
Пояснения
Суть способа заключается в том, чтобы наложить блоки друг на друга посредством margin-right: -100% и содержимое правого блока выровнять по правому краю с помощью text-align: right.Оба блока (right и left) желательно записывать в одну строку, иначе из-за символа переноса строки правый блок будет чуть-чуть вылезать за границы блока-родителя.
Ссылкам обязательно нужно ставить position: relative, иначе из-за наложения блоков некоторые могут быть некликабельные.