Html заголовок по центру

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

Атрибуты и заголовки в HTML

Атрибуты в HTML

Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть очень много. К примеру, с помощью атрибутов мы можем выровнять текст абзаца по ширине, задать стиль и размер шрифта, задать нужные отступы и т.д. Атрибуты прописываются внутри тегов, после них идет знак равенства, затем в двойных кавычках указываются значения атрибута. Разделяются атрибуты друг от друга точкой с запятой.

Примеры работы с атрибутами

Рассмотрим работу с атрибутами на примерах. Самый простой пример — возьмем тег абзаца <p> с атрибутом «align». Напишем:

<p align="left">Пример выравнивания абзаца по левому краю</p>

Атрибут «align» сообщает браузеру, что данный абзац нужно выровнять по левому краю экрана.

Для тега абзаца также могут быть применены атрибуты:

  • align=»center» – выравнивание по центру экрана;
  • align=»right» – выравнивание по правому краю;
  • align=»justify» — выравнивание текста по ширине экрана.

Теперь усложним задачу — создадим HTML страницу с использованием нескольких разных атрибутов. Пример такой страницы будет иметь следующий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами в HTML</title> </head> <body bgcolor="#dadef9"> <p align="center">Атрибуты в HTML</p> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> </body> </html>

Атрибут цвета «bgcolor» позволяет нам задать цвет фона страницы. Атрибуты «center» и «justify» выравнивают текст внутри себя, соответственно, по центру и по ширине.

Заголовки в HTML

Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть — от 1 до 6, они указывают на размер заголовка (<h1> является самым большим заголовком, <h6> — самым маленьким). Для примера создадим веб-страницу, имеющую несколько заголовков. Код этой страницы будет иметь вид:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Пример страницы с атрибутами и заголовками в HTML</title> </head> <body bgcolor="#dadef9"> <h1>Атрибуты в HTML</h1> <p align="justify">Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть неограниченное количество.</p> <h2 align="center">Заголовки в HTML</h2> <p align="justify">Для того, чтобы создать заголовок на странице используется специальный тег <h> c индексом. Таких индексов всего шесть - от 1 до 6, они указывают на размер заголовка...</p> </body> </html>

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


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

siteblogger.ru

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

Возможно, кого-то и устраивает такой вариант. Но если есть желание выровнять их, то этот пост для вас.Обычно мы создаём с помощью фотошопа или другого редактора свою уникальную шапку для блога. Тут, конечно, название расположено именно там, где мы его желаем видеть. Но не все изначально знают, как это сделать и довольствуются только теми настройками, которые нам предложены. В итоге название блога смещено влево.

Давайте посмотрим, как с помощью CSS в шаблоне блога можно это исправить. Расположим все заголовки строго по центру и добавим немного уникальности им.

Как обычно, идём во вкладку шаблон и обязательно делаем резервную копию. Если что-то пойдёт не так, вы сможете обратно загрузить шаблон со своего компьютера. А лучше будет, если пока все эксперименты вы будите делать на тестов блоге. Создайте для этого ещё один блог на основе того же шаблона.


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

Вкладка шаблон — изменить HTML. В самом верху шаблона нажимаем на чёрный маркер (стрелочку) слева.

И вот тут перед нами открылись все коды  CSS. Спускаемся медленно вниз и находим строку .Header h1 { 

Сразу после скобок прописываем значение

 text-align:center;

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

Но, чтобы немного разнообразить дизайн, разберём ещё несколько стилей CSS, которые можно добавить в эти скобки. Нужно это вам или нет решайте сами. Тут масса вариантов. Меняйте цветовые значения.

background:#e9967a;- цвет фона.
или background:url (http://www.fonstola.ru/large/201310/134392.jpg); картинка вместо фона.
height:50px; — значение ширины блока названия.
text-shadow: 4px 3px 0px #B2AFBA, 9px 8px 0px rgba(0,0,0,0.10); — задаём тень для текста
border-radius: 15px; — закругление углов.
-moz-box-shadow:0 0 30px #a28b53 inset;
box-shadow:0 0 30px #a28b53 inset;                            
-webkit-box-shadow:0 0 30px #a28b53 inset;


Выделенное синим цветом — внутренняя тень поля названия. Только будьте внимательны. Если меняете цвет, то только вот это  #e9967a (решётка и шестизначное число). Двоеточие, скобки, тире, точка с запятой — всё очень важно в коде.

Как выровнять по центру заголовок гаджета в боковой панели.

Так же спускаемся ниже и находим такую строчку

.sidebar .widget h2 { 

В скобки прописываем  text-align: center; Однако, в этом случае, необходимо задать ширину, размер шрифта, отступы. Здесь я вместо фона использовала изображение и задала тень для текста и блока.

background:url(http://www.fonstola.ru/large/201310/134392.jpg);фон или изображение
height:20px;
width: 200px;
border-radius: 13px;
margin-left: 0px;
padding-top:0px; / расстояние от края рамки/
font-size: 16px; /размер шрифта/
text-align: center; /расположение текста/
text-shadow: 4px 3px 0px #d2bf94;, 6px 5px 5px rgba(0,0,0,0.10); /тень для текста/
box-shadow: 0 4px 6px rgba(0, 0, 0, .2); /тень для блока/

www.shpargalochki.ru

Вертикальное и горизонтальное центрирование в CSS уровня 3

Мы можем расширить оба метода, чтобы центрировать по горизонтали и по вертикали одновременно.


Побочный эффект абсолютного позиционирования абзаца состоит в том, что абзац становится ровно таким широким, каким он должен быть (если только мы явно не укажем ширину). В примере ниже мы именно этого и хотим: мы размещаем по центру абзац из одного слова (“Центр!“), так что ширина абзаца должна быть равна ширине этого слова.

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

 <div class=container4>  <p>Центр! </div>

В плане вертикального центрирования эта таблица стилей схожа с таблицей из предыдущего примера. Но теперь мы ещё перемещаем элемент на полпути через контейнер с помощью правила ‘left: 50%’ и одновременно сдвигаем его влево на половину своей собственной ширины в преобразовании ‘translate’:

 div.container4 {  height: 10em;  position: relative } div.container4 p {  margin: 0;  background: yellow;  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%) }

Следующий пример объясняет, зачем требуется правило ‘margin-right: -50%’.

Когда форматер CSS поддерживает ‘flex’, всё становится ещё легче:

с этой таблицей стилей:

 div.container6 {  height: 10em;  display: flex;  align-items: center;  justify-content: center } div.container6 p {  margin: 0 }

т.е. единственным дополнением является ‘justify-content: center’. Точно также, как ‘align-items’ определяет вертикальное выравнивание содержимого контейнера, ‘justify-content’ таким же образом определяет горизонтальное выравнивание. (На самом деле всё несколько сложнее, как следует из их названий, но в простом случае, работает это именно так.). Побочный эффект от применения свойства ‘flex’ состоит в том, что дочерний элемент, в нашем случае это Р, автоматически становится настолько малым, насколько это возможно.

www.w3.org

Абзацы в языке HTML

Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег <p>. Синтаксис создания абзацев следующий:

<p>Это первый абзац.</p>
<p>А это уже второй абзац</p>

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег <p> также является блочным элементом. Что такое блочные элементы я писал в статье «Как  создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.


Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:

<!doctype html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Сайт об автомобилях.</title>
</head>
<body>
<p>Сайт об автомобилях.</p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<p>Классификация автомобилей</p>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>
</body>
</html>

При открытии данного файла будет примерно такая картина:

абзац html - применение тега p

Пока, что наша страница содержит одни абзацы.

Для выравнивания текста в абзаце тег <p> поддерживает атрибут align. Он может принимать одно из четырех значений:


    • left — выравнивание текста по левому краю;
    • center — выравнивание текста по центру;
    • right — выравнивание текста по правому краю;
    • justify — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.

По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

<p align=»left»>Этот текст в абзаце на html странице будет выровнен по левому краю!</p>
<p align=»center»>Этот текст в браузере отобразится по центру страницы!</p>
<p align=»right»>Этот текст будет выровнен по правому краю!</p>
<p align=»justify»>А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!</p>

И так это отобразится в браузере:

тег p атрибут align


Заголовки в языке HTML

Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег <h1>, а самым нижним — уровень 6, тег <h6>. Теги <h1> — <h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.

Синтаксис создания заголовков:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Заголовки html</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>
</body>
</html>

Результат:

Заголовки тег h1-h6

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.

Добавим заголовки в нашу страницу:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<p>Легковой;</p>
<p>Грузовой;</p>
<p>Внедорожник;</p>
<p>Багги;</p>
<p>Пикап;</p>
<p>Спортивный;</p>
<p>Гоночный.</p>

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

заголовки на странице

Теги <h1>-<h6>, как и тег <p>, используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом <p>.

Нумерованные и маркированные списки в HTML

Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.

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

Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега <li>. Затем все элементы помещаются внутрь тега <ul>, если нужен маркированный список, или внутрь тега <ol>, если нужен нумерованный список.

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Заголовки html</title>
</head>
<body>
Маркированный список:
<ul>
<li>первый пункт.</li>
<li>второй пункт.</li>
<li>третий пункт.</li> </ul>
Нумерованный список:
<ol>
<li>первый пункт нумерованного списка.</li>
<li>второй пункт нумерованного списка.</li>
<li>третий пункт нумерованного списка.</li>
</ol>
</body>
</html>

И выглядят они примерно так:

Html заголовок по центру

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег <ul> добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег <li> если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

  • disc — закрашенная окружность;
  • circle — окружность;
  • square — квадрат.

По умолчанию атрибут type равен disc. Пример использования:

<ul type=»circle»>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul type=»square»>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<ul>
<li type=»circle»>Пункт 1</li>
<li type=»square»>Пункт 2</li>
<li type=»disc»>Пункт 3</li>
</ul>

Отображение в браузере:

html список, атрибут type

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры.

По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.

Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов <li> внешнего списка:

<ul>
<li>первый пункт.</li>
<li>второй пункт.
<ul>
<li>первый пункт вложенного списка.</li>
<li>второй пункт вложенного списка.</li>
<li>третий пункт вложенного списка.</li>
</ul>
</li>
<li>третий пункт.</li>
</ul>

И в браузере:

вложенный html список

В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега <dl>. Внутри него помещают пары «термин — определение». Термины заключают в парный тег <dt>, а определения — в парный тег <dd>:

<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>

Отображение в браузере:

список определений

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:

<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

И посмотрим результат:

Html заголовок по центру

Горизонтальные линии

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:

<p>Первый абзац</p>
<hr>
<p>Второй абзац</p>

И вот как это отображается:

Html заголовок по центру

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.

С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег <hr> поддерживает следующие атрибуты:

  • align — определяет выравнивание линии;
  • color — задает цвет линии;
  • size — устанавливает толщину линии в пикселях;
  • width — устанавливает ширину линии в пикселях.

Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:

<h1>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком автомобиль это:</p>
<p>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.</p>
<hr color=»green» size=»1″ width=»320″ align=»left»>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>

Результат будет примерно таким:

горизонтальная линия hr

Комментарии html

В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом <!— и закрывающим —>. Пример:

<!— Это пример, он не отображается web-браузером —>

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

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

  • Заголовки. Существует шесть уровней заголовков, которые можно создать на странице с помощью парных тегов <h1>-<h6>;
  • На веб-странице можно создать маркированный или нумерованный список фраз. Для создания маркированного списка применяется парный тег <ul>, а для нумерованного <ol>. Для выделения каждого пункта применяется парный тег <li>;
  • Для отделения блоков текста можно применять горизонтальную линию с помощью одинарного тега <hr>.

Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!

webcodius.ru

Теория и практика — Параграфы и заголовки HTML страницы

Сегодня мы поговорим о параграфах и заголовках. Начнем с простого — с параграфов и где они применяются.

Параграфы на странице

Я сейчас приведу пример кода, в котором будет присутствовать тег параграфа <p> </p>.

Основную структуру Вы уже помните из первого урока. Там разбирали основы и смотрели, что же такое HTML. Поэтому сосредоточим свое внимание на том, что находится между тегами <body> </body>.

Когда Вы пишете любой текст на странице, будь это просто абзац или небольшая поясняющая строка под изображением, необходимо этот текст помещать внутрь тега <p> </p>.

В последующих уроках Вы увидите процесс оформления данных абзацев. Сейчас Вы должны понять то, что нельзя размещать тег на странице без какого-либо тега. Потому что в дальнейшем будет сложно применить какие-то индивидуальные стили именно для этого участка текста.

Попробуйте написать несколько абзацев. Некоторые абзацы возьмите в тег <p> </p>, а некоторые оставьте без него. И Вы сразу увидите разнице. Потому что если Вы напишете абзац внутри этого тега, то у него сразу же появятся отступы. А сейчас перейдем уже в HTML заголовкам страницы.

HTML заголовки на странице

В HTML документе присутствует семантика. Я не говорю о технологии HTML5 и его новых тегах. Здесь лишь разберем самые базовые, чтобы Вы быстро смогли освоить азы HTML. Семантика означает то, что не надо заголовки, абзацы, таблицы и так далее, создавать с помощью одного и того же тега. Это можно сделать, но технология HTML более разнообразна и для разных ситуаций предусмотрены соответствующие теги. А Вам лишь необходимо освоить основные теги, чтобы свободно работать с HTML кодом.

Это небольшое введение я написал к тому, что для параграфов необходимо использовать уже известный Вам тег <p> </p>. А вот для заголовков используются теги, которые начинаются с английской буквы "H".

Вот весь список заголовков, которые Вы можете использовать:

  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>

Некоторые из данных тегов используются гораздо чаще. Это такие теги как h1, h2 или h3. Если кто-то уже знаком с CSS, то понимает, что заголовок HTML заголовок страницы h3 можно стилизовать таким образом, что он будет внешне похож и на h1 или h2. Но значения, которые они носят, хотя бы для SEO оптимизации, кардинально отличаются. Как правило, эти цифры, внутри тегов, следует понимать как уровень важности того или иного HTML заголовка. Поэтому необходимо очень тщательно прорабатывать данные элементы и тогда поисковые системы станут замечать Ваши статьи.

Пока мы не дошли до CSS, Вы увидите стили заголовков, которые заданы по умолчанию в браузерах. Если Вы вставите один за одним данные теги и внутри напишите какой-либо текст, то увидите следующее:

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

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

Видео урок — HTML заголовок страницы? (практика)

Наглядное видео на примере работы с данными тегами:

Домашнее задание

Д/З: в качестве примера напишите небольшой текст, который будет состоять из 5-7 абзацев и 2-3 разнообразных заголовков.

Больше практикуйтесь в параграфах и HTML заголовках страниц!

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru

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

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

  1. 1.Тег <center>
    Очень простой в использовании тег, который выравнивает по центру все строчные элементы, которые в нём находятся, а именно:

    • текст,
    • картинки,
    • ссылки,
    • а также теги <span>, <strong>, <b>, <gt;, <gt;, <input><select> и некоторые другие.

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

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

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

Как выровнять текст по центру при помощи CSS?

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

  • text-align: center; — для выравнивания по центру
  • text-align: left; — по левой стороне
  • text-align: right; — по правой стороне
  • text-align: justify; — по ширине блока или страницы.

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

  1. 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

    А затем в CSS файле вашего сайта пишем:

    Вместо block-text может быть любое другое название класса.

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

    В этом случае выравнивание текста по центру применится для всех тегов

    , которые находятся внутри тега с классом block:

    Для выравнивания заголовков внутри блока с классом block запись будет немного другая:

  2. 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:

    Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.

На этом у меня всё! Спасибо что посетили мой сайт! Буду очень рада видеть ваши комментарии! Успехов вам и процветания!

С уважением Юлия Гусарь

impuls-web.ru

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

Html заголовок по центру

Наша страница состоит из четырех блоков: шапки (header), меню (menu), содержимого (content) и низа сайта (footer). Для выравнивания по центру страницы мы поместим эти четыре блока в один главный блок (main): На примере этой структуры рассмотрим несколько вариантов.

Верстка и центрирование резинового сайта

При верстке резинового сайта основной используемой единицей измерения является — %, ведь сайт должен растягиваться по ширине и занимать все свободное пространство.

Следовательно, ширина блоков «header» и «footer» будет составлять 100% ширины экрана. Ширина блока «menu» пусть будет 30%, а блок «content» должен располагаться рядом с блоком «menu», т.е. он должен иметь левое поле (margin-left) шириной равной ширине блока «menu», т.е. 30%.

Чтобы блоки «menu» и «content» располагались рядом, сделаем блок «menu» плавающим и прижмем его к левому краю. Также зададим цвета фона (background) для наших блоков. Теперь запишем все это в таблицу стилей (на странице style.css)

Высоту блоков задали условно, чтобы был виден результат. Посмотрите на нашу страницу в браузере:

Html заголовок по центру

Если вы будете менять размеры окна браузера, то будет меняться ширина всех блоков. Это не всегда удобно, т.к. при растягивании блока меню возникает пустое место. Поэтому чаще ширину блока «menu» делают фиксированной, давайте и мы так сделаем. Для этого заменим в таблице стилей значения соответствующих свойств: Теперь наша страница растягивается более естественно. При резиновой верстке страницы занимают всю ширину экрана, поэтому выравнивание по центру страниц не требуется.

Но если хочется можно сделать так, чтобы ваша страница имела равные отступы слева и справа экрана. Для этого надо добавить стиль блоку «main», который является контейнером для всех остальных блоков: Теперь наша страница выглядит так:

css выравнивание по центру страниц сайта

Верстка и центрирование сайта, фиксированной ширины

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

Html заголовок по центру

В этом случае выравнивание по центру страниц сайта можно осуществить следующим образом. Вспомним, что у нашей страницы есть тег «body», которому также можно задать ширину и какие-то отступы.

Сделаем так: зададим тегу «body» ширину в 800 пикселов (как и у блока «main») и левый отступ (padding-left) в 50%. Тогда все содержимое блока «main» будет отображаться в правой части экрана (т.е. от середины вправо):

Html заголовок по центру

Чтобы наш блок «main» располагался посередине экрана, надо чтобы его середина совпадала с серединой тега «body». Т.е. надо сместить блок «main» влево на половину своего размера. Ширина блока «main» — 800 пикселов, значит надо задать ему свойство «margin-left:-400px». Да, это свойство может принимать отрицательные значения, тогда левое поле уменьшается (т.е. сдвигается влево). А именно это нам и нужно.

Теперь таблица стилей выглядит так: А наша страница в браузере располагается ровно посередине:

CSS выравнивание

Мы рассмотрели два варианта выравнивания по центру страниц сайта, на самом деле они не являются догмой. Вы можете поэкспериментировать и придумать свой вариант, только проверяйте его работу в разных браузерах. К сожалению, то что хорошо отображается в FireFox или Opera, может совершенно непонятно отображаться в IE и наоборот. И об этом надо помнить.

Удачи Вам в ваших творческих поисках!

www.site-do.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector