Как в css выровнять текст по центру. используя эти простые правила вы сможете быстрее редактировать свои статьи

Содержание:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 16.

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Единицы измерения CSS,
размер шрифта

Текстовая тень в CSS

Кажется, вы используете блокировщик рекламы 🙁

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

Центрирование по вертикали в CSS уровня 3

Как выровнять по центру в css

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным
(position: relative), что превратит его в контейнер для абсолютно
позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным
(position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’.
(Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на
половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Смена регистра

Выравниваем текст в файле word

Указав свойство text-transform, вы можете сделать так, чтобы все буквы текста были заглавными (значение uppercase), строчными (lovercase), или чтобы каждое слово начиналось с большой буквы (capitalize).

Код:

<!DOCTYPE html>
<html>
<head>
    <title>text-decoration</title>
</head>
<body>
<p style="text-transform: uppercase;">Здесь все буквы будут большими.</p>
<p style="text-transform: lovercase;">Все буквы этой строки будут строчными.</p>
<p style="text-transform: capitalize;">Здесь каждое слово будет начинаться с заглавной буквы.</p>
</body>
</html>

Результат:

Обратите внимание, что текст в коде набран как обычно: единственная заглавная буква стоит в начале предложения. Отображение на странице меняет CSS-стиль

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

CSS — Выравнивание по горизонтали

Как сделать картинку по центру в html

1. Выравнивание одного блочного элемента (display: block) относительно другого (в котором он расположен) по горизонтали:

…

Block {
margin-left: auto;
margin-right: auto;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 6.0+
Opera 3.5+
Safari 1.0+

2. Выравнивание строчного (display: inline) или строчно-блочного (display: inline-block) элемента по горизонтали:

…

Parent {
text-align: center;
}
.child {
display: inline-block;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 3.0+
Internet Explorer 8.0+
Opera 7.0+
Safari 1.0+

Инструменты центрирования в css

Css-свойствами, предназначенными для выравнивания блоков, текстового и графического контента, пользуются намного чаще. Это связанно в первую очередь с удобством и гибкостью реализации стилей.

Итак, начнем с первого свойства центрирования текста — это text- align.

Оно функционирует так же, как и align в html разметке. Среди ключевых слов можно выбрать одно из общего списка или унаследовать характеристики предка (inherit).

Хочу отметить, что в css3 можно установить еще 2 параметра: start – в зависимости от правил написания текста (справа налево или наоборот) устанавливает выравнивание слева или справа (аналогично работе left или right) и end – противоположен start (при написании текста слева направо действует как right, при написании справа налево – left).

Расскажу о небольшой фишке. При выборе значения justify последняя строка может некрасиво болтаться снизу. Для того чтобы ее, например, расположить по центру, можно воспользоваться свойством text-align-last.

Для выравнивания содержимого сайта или ячеек таблиц по вертикали используется свойство vertical-align. Ниже я описал основные ключевые слова элемента.

Ключевое слово	Предназначение
baseline	Указывает выравнивание по линии предка, которая называется базовой. Если такой линии у объекта-предка не имеется, то выравнивание происходит по нижнему border-у.
middle	Середина видоизменяемого объекта выравнивается по базовой линии, к которой добавляется пол высоты элемента-родителя.
bottom	Нижняя часть выбранного контента подстраивается под основание объекта, находящегося ниже всех.
top	Аналогично bottom, только с верхней частью объекта.
super	Делает символ надстрочным.
sub	Делает элемент подстрочным.

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали HTML-теги для работы с текстом. Пришло время разобраться с тем, как выравнивать текст на странице HTML

Если вы обратили внимание, все то, что вы с вами набирали до этого, выравнивается по левому краю браузера, при чем мы ничего не делаем, так устроено по умолчанию.Что же делать для того, чтобы выравнить содержимое, скажем, по центру? Мне в голову приходит устаревший тег

. На данный момент его я нигде не использую, но, думаю, вам будет полезно его знать

Напишем код нашей страницы и расположим текст по центру. Для этого нужно текст или любой другой элемент (например, картинку) расположить между тегами

  <html>  <head>  <meta charset="utf-8"/>  <title>Выравнивание элементов в HTML</title>  </head>  <body>   <p>Текст с левой стороны</p>   <center>  	<p>Центральный текст</p>   </center>  </body>  </html>

После открытия страницы в браузере, мы увидим, что текст действительно расположился по центру страницы

Хочу обратить ваше внимание вот на какой момент: вы можете решить, что если есть тег

— значит должны быть и теги , и . Заключив содержимое в теги вы увидите, что текст действительно расположился слева

Но это будет не из-за того, что вы поставили тег , а из-за того, что браузер по умолчанию располагает все элементы слева направо, сверху вниз. Так как браузер не знает тега он просто его пропустил. Тегов и не существует.

Что же нам делать, если мы захотим разместить элементы справа? Давайте рассмотрим понятие контейнера <div>, без знания которого не обойтись при блочной верстке сайта. Существует также и табличная верстка. Эти 2 темы заслуживают особого внимания, поэтому о них поговорим в отдельных статьях. Элемент <div> является контейнером, который может включать в себя любые другие элементы, также и другие контейнеры <div>. У тега <div> есть атрибут align, который и отвечает за то, как расположить контейнер на странице. У данного атрибута есть значения left, center, right. Давайте напишем код, где расположим элементы в различных частях браузера:

  <html>  <head>  <meta charset="utf-8"/>  <title>Выравнивание элементов в HTML</title>  </head>  <body>  <div>Текст, расположенный слева</div>  <div align="center">Текст, расположенный по центру</div>  <div align="right">Текст, расположенный справа</div>  </body>  </html>

В данной статье вы научились выравнивать текст на html-странице.

Домашнее задание: выведите в правой части браузера 1 заголовок первого уровня и 1 заголовок второго уровня.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Равные отступы сверху и снизу

В данном методе явно задаются равные отступы сверху и снизу от родительского элемента.

CSS:

#parent {
	padding: 5% 0;
}
#child {
	padding: 10% 0;
}

В коде CSS примера отступы сверху и снизу задаются для обоих элементов. Для вложенного элемента установка отступов будет служить для вертикального центрирования. А отступы родительского элемента будут центрировать вложенный элемент в нём.

Для динамического изменения размеров элементов используются относительные единицы измерения. А для абсолютных единиц измерения придется проделать расчеты.

Например, если родительский элемент имеет высоту 400 px, а вложенный элемент — 100px, то необходимы отступы 150px сверху и снизу.

150 + 150 + 100 = 400

Использование % позволяет расчеты оставить браузеру.

Данный метод работает везде. Обратной стороной является необходимость в расчетах.

Примечание: Данный метод работает за счет установки внешних отступов элемента. Вы можете также использовать поля внутри элемента. Решение о применении полей или отступов нужно принимать в зависимости от специфики проекта.

CSS — Выравнивание по вертикали

1. Отцентровать один элемент (display: inline , display: inline-block) относительно другого (в котором он расположен) по центру. Родительский блок в этом примере имеет фиксированную высоту, которая задаётся с помощью свойства CSS line-height .

…

Parent {
line-height: 500px;
}
.child {
display: inline-block;
vertical-align: middle;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 3.0+
Internet Explorer 8.0+
Opera 7.0+
Safari 1.0+

2. Центрирования одного блока относительно другого по вертикали посредством представления родителя как таблицы, а ребёнка как ячейки этой таблицы.

Parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 8.0+
Opera 7.5+
Safari 1.0+

Как выровнять текст

Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать <P ALIGN>. У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры:

LEFT – выравнивание текста по левому краю

RIGHT – выравнивание текста по правому краю

CENTER – выравнивание текста по центру

JUSTIFY – выравнивание текста по ширине

Чтобы выровнять название стихотворения по центру необходимо сделать следующую запись:

Пример:

<P ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</P>

Замечание

Обратите внимание, что при закрытии тэга его атрибуты не пишутся

Результат:

Самостоятельно сделайте выравнивание строки «Александр Пушкин» по правому краю.

Метод line-height

Данный метод работает, когда вы хотите центрировать вертикально одну строчку текста. Все что нужно сделать — это задать высоту строки больше, чем размер шрифта.

По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста. И строка будет отцентрирована вертикально. Часто высоту строки делают равной высоте элемента.

CSS:

#child {
	line-height: 200px; 
}

Данный метод работает во всех браузерах, хотя использовать его можно только для одной строки. Значение 200 px в примере выбрано произвольно. Можно использовать любые величины больше размера шрифта текста.

Html и его детища и align

Данный способ почти не используется, так как его вытеснили инструменты каскадных стилевых таблиц. Однако знание, что такой тег существует, вам не помешает.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>CENTER</title>
  <meta charset=utf-8">
 </head>
 <body> 
 <center>
  <p>Этот контент будет расположен по центру.</p>
  </center>  
 </body> 
</html>

Ниже я приведу пример, в котором картинку и абзац расположу по центру.

<!DOCTYPE HTML>
<html>
 <head>
  <title>align</title>
  <meta charset=utf-8">
 </head>
 <body> 
  <p align ="center"><img src="http://zverivdom.com/files/node_post/photo/prodajutsya-shhenki-sibirskij-khaski--speshite-ostalosy-dva-shhenka.jpg" alt="Щенок" align="middle"> Этот контент будет расположен по центру.</p>
 </body> 
</html>

Заметьте, что для картинки разбираемый нами атрибут имеет несколько другие значения.

align=»middle»

Выравнивание текста по вертикали HTML & CSS

Куда большую проблему, особенно для начинающих, доставляет необходимость вертикального выравнивания тексте. Необходимость выровнять текст по вертикали, в верстке встречается при:

создании различных дизайнов кнопок;
выравнивании разной величины блоков находящихся на одной линии;
вертикальное выравнивание текстов, с разным количеством строчке;
и еще в 100500 случаях.

Ниже приведу самые распространенные способы для центрирования по вертикали, ознакомьтесь и выберите наиболее подходящий в вашем случае.

Вертикальное центрирование текста с помощью тега «line-height»

Приведу пример создания кнопки стилями CSS.

Код HTML:

<div id="wrapper">
<div class="button">
Скачать
</div>
</div>

Код CSS:

#wrapper {
}
.button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  border-radius: 4px;
  color: #555555;
  width:120px;
  margin: 20px auto;
  font-size: 14px;
  text-align:center;
  height: 40px;
  line-height: 40px;
}
.button:hover, a.button:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0 none;
}

Результат: https://jsfiddle.net/k6g1phmf/14/.

Самые главные строчки, которые изучаем в данном примере, это и . Height, это высота кнопки, а тег , указывает на межстрочный интервал сверху и снизу. В результате, название кнопки располагается по центру.

В том случае, если высота родительского блока известна, может помочь следующая вариация.

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;  
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  height: 100px;
  margin-top: -70px;
  background: #00f;
  color: white;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/15/.

Вертикальное выравнивание по типу таблицы

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  display: table;
}
.content {
  background: #f09d06;
  color: white;
  width: 300px;
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
}

Результат: https://jsfiddle.net/k6g1phmf/18/.

Вертикальное выравнивание блока тегом «transform»

В том случае если не известен размер родительского блока, можно сделать такой трюк:

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  background: black;
  color: white;
  padding: 20px;
  transform: translateY(-50%);
  resize: vertical;
  overflow: auto;
}

Результат: https://jsfiddle.net/k6g1phmf/16/.

Выравнивание по вертикали с использованием «display:flex»

На сегодняшний день, самый лучший способ центрирования текста по вертикали в CSS, использование flex-верстки. Все что нужно сделать, это задать родительскому блоку тег и указать свойства и .

Код HTML:

<div id="wrapper">
<div class="content">
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
</div>
</div>

Код CSS:

#wrapper {
  background: #f09d06;
  height: 300px;
  margin: 20px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content {
  background: black;
  color: white;
  width: 50%;
  padding: 20px;
}

Результат: https://jsfiddle.net/k6g1phmf/17/.

Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.

Интересненько!Нужно срочно изучить!

Вертикальное центрирование

CSS уровня 2 не обладает свойством вертикального центрирования. Вероятно, оно появится в версии CSS уровня 3 (см. ). Но даже в CSS2 вы можете центрировать блоки вертикально при помощи комбинирования нескольких свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, т.к. содержимое ячейки таблицы
может быть выровнено по центру вертикально.

Пример, приведенный ниже, демонстрирует центрирование абзаца внутри блока, который имеет определенную заданную высоту. Отдельный пример показывает абзац, который центрирован вертикально в окне браузера, потому что находится внутри блока, позиционированного абсолютно и по высоте окна.

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>Этот маленький абзац...
</DIV>

§ 4. Выравнивание текста

Для того, чтобы выровнять текст используется атрибут align с возможными значениями center, left, right и justify. Он, соответственно, выравнивает текст по центру, по левому краю, по правому краю и одновременно по двум краям сразу. Например, html-код:

align=»center»>Текст по центру

выровняет текст по центру:

Текст по центру

А этот код:

right»>Выравнивание текста по правому краю

выровняет текст по правому краю

Выравнивание текста по правому краю

Если атрибут align не используется, то текст будет выровнен по левому краю. Это происходит по умолчанию. Пример, код:

По умолчанию текст выравнивается по левому краю

выровнит текст по левому краю

По умолчанию текст выравнивается по левому краю

DIV-элемент, центрированный при помощи Flexbox

Здесь мы располагаем CSS div по центру с помощью Flexbox. Он предназначен для того, чтобы облегчить процесс разработки дизайна пользовательских интерфейсов. Этот модуль поддерживается Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+, а также Android Browser 40+.

CSS

.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px; 
}

HTML

<div class="container"><div class="item"></div><div>

Значение свойства height может быть любым, но только больше размера центрированного div-элемента.

Как выровнять в html текст по центру?

В HTML есть два варианта, которые не предполагают использование CSS.

1.Тег <center>
Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:
- текст,
- картинки,
- ссылки,
- а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.
PHP

<center>
Текст, который нужно выровнять по центру.
</center>

1
2
3

<center>

Текст,которыйнужновыровнятьпоцентру.

<center>
2.Использование HTML атрибута align cо значением center.
Этот атрибут нам нужно дописать внутри блочного тега, в котором находится текст, который нам нужно выровнять по центру.
Это может быть тег <div>, <p>, <h1> <h2>… <h6> <blockquote> <form> <section> и некоторые другие.

PHP

<h2 align=»center»>Выравнивание текста по центру при помощи HTML</h2></li>

1 <h2 align=»center»>ВыравниваниетекстапоцентруприпомощиHTML<h2><li>

Если у вас не срабатывает выравнивание заданное при помощи HTML, то, скорее всего, для этого блока уже задано выравнивание в CSS.

Так же атрибут align имеет и другие значения:

align=’»left’ — выравнивание текста по левому краю
align=’right’ – выравнивание по правому краю
align=’justify’ – выравнивание текста по ширине

Выравнивание по горизонтали

Для него используется свойство text-align. Выровнять с его помощью можно только блочный текст (теги <div>, <p>). Свойству может быть задано одно из четырех значений:

left — выравнивание по левому краю.
right — по правому краю.
center — по центру.
justify — по ширине.

Вот код HTML-страницы, текст которой выровнен по правому краю:

<!DOCTYPE html>
<html>
<head>
    <title>Выравнивание по правому краю</title>
    <style type="text/css">
    p { text-align: right; }
    </style>
</head>
<body>
<p>Текст, который вы сейчас читаете, выровнен по правому краю.</p>
</body>
</html>

Выглядеть страница будет так:

Если текст выровнен по ширине (text-align: justify), то можно использовать свойство text-align-last, чтобы задать отличное от основного содержимого выравнивание последней строчки текста элемента.

Тэги изменения начертания шрифта

Создадим новый документ.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
здесь будут записаны 2 математические формулы
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
здесь будут записаны 2 химические формулы
</BODY>
</HTML>

Для строки «здесь будут записаны 2 математические формулы» установим курсивное начертание, для этого используем тэг <I>.

Пример:

<I>
здесь будут записаны 2 математические формулы
</I>

А для строки «здесь будут записаны 2 химические формулы» установим жирное начертание, используя тэг <B>.

Пример:

<B>
здесь будут записаны 2 химические формулы
</B>

Результат:

Тэг <SUB> отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Тэг <SUP> отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.

Пример:

<HTML>
<HEAD>
<TITLE>   Формулы </TITLE>
</HEAD>
<BODY>
<H3 ALIGN = “CENTER”>
Пример некоторых математических формул
</H3>
<I>
здесь будут записаны 2 математические формулы <BR>
</I>
(a+b) <SUP> 2</SUP> =a<SUP> 2</SUP> +2*a*b+b<SUP> 2</SUP> <BR>
(a+b)*(a-b)=a<SUP> 2</SUP>-b<SUP> 2</SUP> <BR>
<H3 ALIGN = “CENTER”>
Пример некоторых химических формул
</H3>
<B>
здесь будут записаны 2 химические формулы
</B>
H<SUB> 2</SUB> O <BR>
H<SUB> 2</SUB> SO<SUB> 4</SUB>
</BODY>
</HTML>

Результат:

CSS — Выравнивание по горизонтали

1. Выравнивание одного блочного элемента () относительно другого (в котором он расположен) по горизонтали:

HTML-код:

<div>
  ...
  <div class="block">
    ...
  </div>
</div>

CSS-код:

.block {
  margin-left: auto;
  margin-right: auto;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 1.0+
Internet Explorer 6.0+
Opera 3.5+
Safari 1.0+

2. Выравнивание строчного () или строчно-блочного () элемента по горизонтали:

HTML-код:

<div class="parent">
  ...
  <div class="child">
    ...
  </div>
</div>

CSS-код:

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

Браузеры, которые поддерживают данное решение:

Chrome 1.0+
Firefox 3.0+
Internet Explorer 8.0+
Opera 7.0+
Safari 1.0+

Параметры white-space и word-wrap, управляющие разрывом строк

На очереди параметр white-space, который отвечает за отображение пробельных символов на html странице.

Как мы знаем, по умолчанию браузер объединяет все подряд идущие пробельные символы: пробелы, переносы строк и символы табуляции, — в один пробел. Исключение тег «pre», помещенный в него текст отображается как есть, со всеми пробелами.

Свойство white-space имеет следующий синтаксис:

Понятно, что значение normal используется по умолчанию и оставляет все как описывалось выше, все подряд идущие пробелы объединяются в один и перенос строк устанавливается автоматически.

Использование значения «pre», будет полной аналогией при применении тега «pre». Браузер будет отображать страницу с учетом всех лишних пробелов и переносов, как они были добавлены разработчиком. Если строка текста получиться слишком длинной, то будет добавлена горизонтальная полоса прокрутки.

Значение nowrap запрещает браузеру переносить строки и текст отображается одной строкой. Единственное, добавление тега «br» позволит перенести текст на новую строку.

Значение pre-wrap сохраняет все последовательности пробелов и переносов строк, но если строка не помещается в заданную область, то браузер автоматически переносит текст на новую строку.

Ну и значение pre-line преобразует пробелы в один пробел, переводы строк сохраняются и браузер может разорвать слишком длинные строки, чтобы избежать горизонтальной прокрутки.

Пример использования:

Далее рассмотрим параметр word-wrap, который поваляет указать переносить или нет длинные слова, которые не помещаются в заданную область. Это свойство применяется не часто, но иногда без него не обойтись:

word-wrap: normal|break-word

Значение normal указывает браузеру, что текст можно разрывать только по пробелам и это обычное поведение браузера. А значение break-word разрешает браузеру вставлять разрывы строк внутри слов. Пример:

Как задать цвет текста

Для изменения цвета шрифта тэг FONT имеет атрибут COLOR. Значение цвета можно задавать двумя способами. по его названию или по шестнадцатеричному значению.

Зададим для текста цвет FF9900, для этого нужно сделать следующую запись:

Пример:

<FONT COLOR="# FF9900">

Обратите внимание, что при использовании шестнадцатеричного кода для указания цвета перед ним обязательно нужно вставить знак решетка #. Пример:

Пример:

<HTML>
<HEAD>
<TITLE>   Стихотворение </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>
<H3 ALIGN = “RIGHT”>
Александр Пушкин
</H3>
<FONT FACE=" Arial" SIZE="5" COLOR="#FF9900">
<P>
Унылая пора! Очей очарованье!   <BR>
Приятна мне твоя прощальная краса —   <BR>
Люблю я пышное природы увяданье,   <BR>
В багрец и в золото одетые леса,   <BR>
В их сенях ветра шум и свежее дыханье,   <BR>
И мглой волнистою покрыты небеса,   <BR>
И редкий солнца луч, и первые морозы,   <BR>
И отдаленные седой зимы угрозы.   <BR>
</P>
</FONT>
<HR COLOR="yellow" SIZE="2">
</BODY>
</HTML>

Результат:

Что следует помнить

Абзац HTML может быть выровнен с помощью атрибута align или стиля text-align;
HTML будет отображаться по-разному в зависимости от размеров экрана, размеров окна браузера;
Добавление дополнительных пробелов или пустых строк в HTML-код не влияет на вывод. Браузер удаляет все лишние пробелы;
Теги задают, что должно отображаться, а стили определяют, как это должно выводиться;
Стили могут быть заданы тремя различными способами — встроенные (внутри тегов), внутренние (внутри того же HTML-файла с помощью элемента <style>) и внешние (в отдельном файле);
Лучшей практикой при разработке веб-сайтов считается использование внешнего файла CSS. Таким образом, мы можем разделить контент и представление;
Style является глобальным атрибутом, поэтому его можно использовать с любыми другими элементами, а не только с элементом <p>;
Стиль text-align выравнивает абзац по левому краю, по центру, по правому краю или по ширине;
Междустрочный интервал для абзаца можно задать с помощью стиля line-height. Он может принимать различные значения;
Вы можете указать для line-height кратные значения (1 для одинарного междустрочного интервала, 1,5 для полуторного, 2 для двойного, 3 для тройного и так далее), а также пиксели, проценты и т.д.;
Отступ для абзаца в HTML можно задать с помощью стиля padding-left или padding-right. Может принимать значения в пикселях, процентах и т.д.;
Интервалы между абзацами в HTML можно задать с помощью стилей padding-top или padding-bottom. Для этого также допустимы значения в пикселях, процентах и т.д.

Задача вертикального центрирования

Горизонтальное центрирование выполняется очень просто и легко. Когда центрируемый элемент является строчным, используем свойство выравнивания относительно родительского элемента. Когда элемент блочный — задаем ему ширину и автоматическую установку левого и правого полей.

Большинство людей, используя свойство text-align:, обращаются к свойству vertical-align для центрирования по вертикали. Все выглядит достаточно логично. Если вы использовали табличные шаблоны, то наверняка активно использовали атрибут valign, который укрепляет веру в то, что vertical-align правильный путь к решению задачи.

Но атрибут valign работает только в ячейках таблицы. А свойство vertical-align очень на него похоже. Оно также действует на ячейки таблицы и некоторые строчные элементы.

Значение свойства vertical-align действует по отношению к родительскому строчному элементу.

В строке текста выравнивание производится по отношению к высоте строки.
В ячейке таблицы используется выравнивание по отношению к величине, вычисляемой специальным алгоритмом (обычно получается высота строки).

Но, к сожалению, свойство vertical-align не действует в блочных элементах (например, параграфах внутри элемента div ). Такое положение может привести к мысли, что решения задачи вертикального выравнивания нет.

Но есть другие методы центрирования блочных элементов, выбор которых зависит от того, что центрируется по отношению к внешнему контейнеру.

Интервал между словами и символами

Оформляя страницы на сайте, приходится регулировать интервал не только между строк, но и между отдельными словами, или символами. Например, уменьшив интервал между символами, позволит сделать длинный заголовок более компактным, или наоборот, увеличив интервал, придаст ему более растянутый вид.

Чтобы установить определенный интервал между символами необходимо использовать CSS свойство letter-spacing. При работе со свойством используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между символами, а отрицательные уменьшают, вплоть до наслоения букв и символов друг на друга.

Давайте рассмотрим пример использования свойства letter-spacing:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства letter-spacing</title>
<style> 
.test {
letter-spacing : -1px; /* задаём отрицательный интервал между символами в тексте. */
}
.test2 {
letter-spacing : normal; /* задаём интервал между символами в тексте (значение по умолчанию). */
}
.test3 {
letter-spacing : 2px; /* задаём интервал между символами в тексте (2px). */
}
.test4 {
letter-spacing : 1em; /* задаём интервал между символами в тексте (1em). */
}
</style>
</head>
	<body>
		<div class = "test">letter-spacing: -1px</div>
		<div class = "test2">letter-spacing: normal</div>
		<div class = "test3">letter-spacing: 2px</div>
		<div class = "test4">letter-spacing: 1em</div>
	</body>
</html>

В данном примере мы рассмотрели способы указания интервала между символами в тексте в пикселях (как положительное, так и отрицательное значение) и единицах измерения em.

Результат нашего примера:

Рис.63 Пример использования свойства letter-spacing (интервал между символами в тексте).

Задать интервал между отдельными словами позволяет похожее по наименованию свойство CSS — word-spacing. По аналогии со свойством letter-spacing используйте относительные единицы измерения CSS (em, rem, px и так далее). Допускается использование как положительных, так и отрицательных значений. Положительные значения соответственно увеличивают интервал между словами, а отрицательные уменьшают, вплоть до наслоения слов друг на друга.

Давайте рассмотрим пример использования свойства word-spacing:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства word-spacing</title>
<style> 
.test {
word-spacing : normal; /* определяем расстояние между словами (значение по умолчанию) */
}
.test2 {
word-spacing : 1em; /* определяем расстояние между словами (1em) */
}
.test3 {
word-spacing : -5px; /* определяем расстояние между словами (отрицательное значение) */
}
</style>
</head>
	<body>
		<p class = "test">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test2">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
		<p class = "test3">Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю. Съешь же ещё этих мягких французских булок да выпей чаю.</p>
	</body>
</html>

Результат нашего примера:

Рис. 64 Пример использования свойства word-spacing (интервал между словами в тексте).