Css выравнивание правому краю div. Выравнивание свойством line-height
Когда Вы печатаете текст в программе Microsoft Word, он печатается по левому краю. Но довольно часто требуется сместить его в другую сторону.
Например, заголовок принято смещать в центр страницы, а чтобы напечатать шапку документа, зачастую нужно сместить текст вправо. Эта процедура называется выравнивание.
— это то, как текст расположен на странице. Он может быть расположен по центру, по левому и правому краю, по ширине. Для этого в программе Word есть специальные кнопки вверху: 
О них мы поговорим чуть позже. А пока несколько слов о том, как не нужно выравнивать текст.
Неправильное выравнивание текста
Многие люди по незнанию выравнивают текст неправильно - при помощи кнопки пробел на клавиатуре или кнопки Tab.
Такое смещение считается ошибкой, так как расстояние от левого поля делается на «глазок». Из-за этого оно чаще всего больше, чем нужно. А если Вы таким образом выровняете текст по правому краю, то возникнет масса проблем при его редактировании. Да и сам способ весьма неудобный - приходится много раз нажимать кнопку пробел или Tab на клавиатуре.
Чем это грозит? Например, потеряй деловой репутации. Ведь можно очень быстро проверить оформление текста. Для этого достаточно нажать вот на эту кнопку вверху программы Microsoft Word:
В тексте появятся точки и непонятные значки. Вот точками показываются пробелы. И если Вы неправильно выровняете текст, при такой проверке это сразу же будет видно по множеству точек перед ним.
Чтобы вернуть все обратно - убрать точки и непонятные значки, - еще раз нажмите на кнопку
Между прочим, документ с неправильным выравниванием могут не принять в некоторых организациях.
Как выровнять текст
А сейчас научимся правильно выравнивать текст. Кстати, сделать это можно уже после того, как текст напечатан. Рекомендую именно так и поступать - это и проще, и быстрее.
Для смещения текста в программе Word есть четыре кнопки. Находятся они вверху.
— эта кнопка выравнивает текст по левому краю
— вот эта выравнивает по центру
— по правому краю
— по ширине (делает текст ровным с двух сторон)
А теперь попробуем правильно сместить текст. Для начала напечатайте несколько слов в программе Word. Затем выделите их. Для этого наведите курсор (стрелку или палочку) в самое начало или в самый конец текста. Затем нажмите левую кнопку мыши и, не отпуская ее, тяните в другой конец. Когда текст закрасится другим цветом (обычно черным или синим), это будет означать, что он выделен.
После выделения нажмите по кнопке, которая выравнивает текст по центру. Напечатанные Вами слова должны сместиться в середину страницы.
Вам может показаться, что это неправильный центр. На самом деле, все верно. Ведь поле (отступ) с левой стороны больше, чем с правой.
Таким же способом попробуйте выровнять текст по правому краю.
Что касается кнопки «По ширине». Если у Вас немного текста (пару слов), то Вы не увидите отличий от кнопки «По левому краю» - слова так же сместятся влево. А вот если у Вас несколько абзацев, то текст выровняется по двум сторонам листа - и по левой, и по правой. То есть он будет ровным с двух сторон.
Пример текста, выровненного по левому краю:
Тот же текст, только выровненный по ширине:
Кстати, по правилам оформления документов, основной текст должен быть выровнен именно по ширине.
Большинство из нас со школьной скамьи имеют четкое представление об идеально оформленной странице. Равномерная россыпь букв, стройные линии слов, строгий, обрамленный ровными полями прямоугольник текста - именно такую картину мы наблюдаем, перелистывая любое печатное издание. Велик соблазн изобразить что-то подобное и на web-странице, тем более что для этого предложено всем известное средство - выравнивание текста по ширине. Однако что хорошо для типографа, то смертный грех для веб-верстальщика. А все потому, что применительно к разметке сайта эта функция обрастает таким количеством недостатков, что ее единственное достоинство в виде ровненького правого края просто меркнет на глазах. Вот лишь несколько причин, по которым стоит отказаться от выравнивания по ширине в пользу выравнивания по левому краю.
Видимый беспорядок внутри текстового блока
Да-да, чем ровнее края текстового блока, тем очевиднее бардак внутри него. В типографском деле стройности текста позволяет добиться целый арсенал инструментов: переносы, регулировка интервалов между словами и расстояний между буквами и даже чуть более широкие или чуть более узкие варианты шрифта. А вот макет интернет-страницы предполагает, как правило, только один способ «растянуть» строку от края до края - неконтролируемое увеличение ширины пробелов. Мало того, что это приводит к появлению неприглядных зазоров между словами, так эти зазоры, словно по закону подлости, частенько приходятся примерно на одно и то же место в каждой строке, образуя так называемые вертикальные «реки». Все это придает тексту весьма неопрятный вид.
Нечитабельность
Но если эстетикой еще можно было бы пожертвовать ради аккуратных краев, то вот очевидные проблемы с визуальным восприятием текста - все-таки слишком высокая плата за них. А выровненный по ширине текст объективно гораздо менее читабелен, чем выровненный по левому краю. Главная причина кроется все в тех же увеличенных интервалах между словами: глаз постоянно вынужден выискивать начало следующего слова, а из-за разности пробелов от строки к строке еще и перестраиваться с одного расстояния на другое.
Необходимость работать над длиной строки, зачастую безрезультатно
Справедливости ради стоит отметить, что обозначенные недостатки выровненного текста могут быть уменьшены за счет увеличения длины строки. Однако далеко не всегда этот метод будет эффективен. А вот снизить читаемость он может с очень большой долей вероятности: глазам трудно, просканировав до конца одну длинную строчку, точно и быстро перескочить на начало следующей.
Неприспособленность под мобильные устройства
Чем уже колонка с текстом, тем в меньшей степени он подлежит выравниванию по ширине. И здесь такой формат вступает в прямое противоречие с требованиями мобильных устройств, для которых, наоборот, чем короче строка, тем лучше. Согласитесь, одно дело следить взглядом за длинной строчкой на полноэкранном мониторе, и совсем другое - раз за разом прокручивать каждую строку назад и вперед. Сомнительное удовольствие, зато верный способ растерять мобильную аудиторию!
Казалось бы, стоит добавить на страницу функцию переноса слов, и все эти проблемы, возникающие при выравнивании текста по ширине страницы, были бы решены. Но в том-то и загвоздка, что HTML-разметка такой функции не предполагает. Вот и получается, что на сегодняшний день никакого другого способа сохранить допустимые интервалы между словами на web-странице, кроме как выравнивание текста по краю, не существует.
Таким образом, при создании интернет-страницы важно помнить главное: web-сайт - это не книга, и подходить к его оформлению нужно с тех позиций, которые диктуют технологии и психология воприятия, а не чьи-то эстетические воззрения, впрочем, весьма и весьма условные. Поверьте, если ваш текст будет аккуратно размещен и, в первую очередь, легко и с удовольствие читаем, никто и внимания не обратит на такую мелочь, как неровность полей!
Кстати, когда вы читали эту статью, вы обратили внимание на то, что текст не выровнен по ширине?
Выравнивание текста определяет его внешний вид и ориентацию краев абзаца и может выполняться по левому краю, правому краю, по центру или по ширине. В табл. 1 показаны варианты выравнивания блока текста.
| Выравнивание по левому краю | Выравнивание по правому краю | Выравнивание по центру | Выравнивание по ширине |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Наиболее распространенный вариант — выравнивание по левому краю, когда слева текст сдвигается до края, а правый остается неровным. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. Следует иметь в виду, что при использовании выравнивания по ширине в тексте между словами могут появиться большие интервалы, что не очень красиво.
Для установки выравнивания текста обычно используется тег абзаца
С атрибутом align , который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега
| Код HTML | Описание |
|---|---|
| Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы. | |
Текст |
Выравнивание по центру. |
Текст |
Выравнивание по левому краю. |
Текст |
|
Текст |
Выравнивание по ширине. |
| Отключает автоматический перенос строк, даже если текст шире окна браузера. | |
| Текст |
Разрешает браузеру делать перенос строки в указанном месте, даже если
используется тег |
Текст
|
Выравнивание по центру. |
Текст
|
Выравнивание по левому краю. |
Текст
|
Выравнивание по правому краю. |
Текст
|
Выравнивание по ширине. |
Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.
Отличие между абзацем (тег
) и тегом
Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде
. В примере 1 показано, как в подобном случае устанавливать выравнивание.
Пример 1. Выравнивание текста
Как поймать льва?
Метод перебора
Делим пустыню на ряд элементарных участков, размер которых совпадает с габаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.
Метод дихотомии
Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.
Результат примера показан на рис. 1.
Рис. 1. Выравнивание текста по правому и левому краю
В данном примере выравнивание заголовка происходит по центру окна браузера, выделенного абзаца по правому краю, а основного текста — по левому краю.
Довольно часто людям просто лень или некогда изучать интерфейс программы Microsoft Word, поэтому и возникают вопросы вроде «Как выровнять текст в Ворде?» - что ж, давайте разбираться. Когда Вы набираете текст в данной программе, он в автоматическом режиме выравнивается по левому краю. Можно ли сместить его в центр? Или на правую сторону? Конечно же, да. Более того, Вы можете в центре страницы разместить заголовок (шапку документа), а сам текст выровнять по левому краю.
Учимся выравнивать текст в MS Word
В разделе «Главная» располагаются специальные кнопки, некоторые из которых отвечают за выравнивание текста по центру, левому и правому краям, а также по ширине документа.К ним мы ещё вернёмся несколько позже, давайте для начала разберёмся с тем, как не стоит выравнивать текст.
Некорректное выравнивание текста в Ворде
Неопытные пользователи довольно часто начинают выравнивать текст так, как им нужно, подручными средствами – то есть, ставят лишние пробелы или тапают по кнопке «Tab». Такое выравнивание считается ошибочным, потому как расстояние от левой границы рассчитывается на глаз, что весьма неудобно при дальнейшем наборе текста или его редактировании. Более того, на глаз практически нереально сделать необходимый отступ, из-за чего некоторые документы могут не принять. В частности, это касается дипломов – ни один преподаватель не примет текст, напечатанный таким образом – нужно строго соблюсти все требования вплоть до отступов и выравнивания. К тому же, сам способ нельзя назвать удобным – приходится слишком много тапать по кнопкам проблем и Tab.Одно дело, если это касается диплома. А что, если это и вовсе официальный документ? При таком подходе можно запросто потерять деловую репутацию. Именно поэтому для выравнивания текста следует использовать стандартные средства MS Word - кнопки, находящиеся в разделе «Главная».
Для проверки правильности оформления документа также есть специальная кнопка, нажав на неё, Вы увидите скрытые знаки, именно поэтому лучше изначально грамотно подойти к вопросу оформления текста.
После нажатия в тексте появятся непонятные знаки, множество точек и стрелок.
Точки – это пробелы, поставленные Вами. Стрелки – нажатия клавиши Tab, остальное для нас на данном этапе не имеет никакого практического значения. Таким образом, если Вы поставили слишком много пробелов подряд, чтобы выровнять текст так, как Вам нужно, при нажатии кнопки «Отобразить все знаки», Ваша оплошность тут же станет заметной – множество точек и стрелочек.
Для возвращения документа к прежнему виду следует ещё раз кликнуть по этой же кнопке.
Выравниваем текст стандартными средствами Microsoft Word
Итак, возвращаемся к тем самым четырём кнопочкам, представленным ранее.Как видите, всё предельно просто. Спешим Вас обрадовать, текст заново писать не придётся – выровнять его можно и после того, как он был напечатан. Выделяете необходимый участок с помощью мыши и кликаете по одной из кнопок.
Текст выравнивается при помощи атрибута CSS text-align , который может принимать следующие значения:
- center - по центру
- justify - по ширине
- left - по левому краю
- right - по правому краю
Атрибут text-indent задает отступ "красной строки" - первой строки нового абзаца.
Для форматирования текста используют еще такие атрибуты:
- line-height
- высота строки. Возможные значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
- margin
- отступ от внешнего края элемента до внутреннего края родительского элемента. Возможны варианты (margin-top; margin-left; margin-bottom; margin-right). Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
- padding
- отступ от внутреннего края элемента до его содержимого. Возможны варианты (padding-top; padding-left; padding-bottom; padding-right). Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
- vertical-align
- вертикальное выравнивание (актуально для таблиц). Значения:
- top - выравнивание по верхней части
- middle - выравнивание по середине
- bottom - выравнивание по нижней части
- text-top - выравнивание по верхнему краю текста
- text-bottom - выравнивание по нижнему краю текста
- white-space
- способ отделения слов друг от друга
- normal
- nowrap (переносы строк игнорируются)
Ниже представлено несколько примеров выравнивания текста, с которыми разобраться не составит особого труда. Для лучшего понимания работы атрибутов выравнивания текста, попробуйте самостоятельно отформатировать несколько абзацев.
Пример выравнивания текста: Пример №6
HTML-код страницы :
Untitled
Золотое кольцо России
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
Еще три мощных атрибута для форматирования текста:
- line-height
- определяет межстрочный интервал. Значение должно быть больше высоты шрифта, в противном случае значение автоматически подгоняется под высоту текста. Значения:
- n px,pt,ex,em,in,mm,cm,pc
- n %
- word-spacing
- интервал между словами. Значения:
- n px,pt,ex,em,in,mm,cm,pc
- letter-spacing
- интервал между буквами. Значения:
- n px,pt,ex,em,in,mm,cm,pc
Пример форматирования текста: Пример №7
HTML-код страницы :
Untitled
Золотое кольцо России
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
Теперь полученные знания применим во внешнем листе стилей, отформатировав тег абзаца:
Пример форматирования текста внешним листом стилей: Пример №8
HTML-код страницы :
Untitled
Золотое кольцо России
«Золотое кольцо России» (в древности Залесье), туристический маршрут, включающий сеть древнерусских городов: Сергиев Посад, Переславль-Залесский, Ростов Великий, Ярославль, Кострома, Плес, Владимир, Боголюбово, Суздаль, Юрьев-Польской, Углич. Название Залесье прежде всего географическое, оно подразумевало все то, что находилось «за лесом» по отношению к Киевской Руси.
CSS файл :
body {font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; color: gray; font-size: 8pt;} H1 {color: green; font-size: 130%;} p {text-indent: 15px; font-size: 10pt; line-height: 150%; text-align: justify; letter-spacing: 7px;}