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

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

Существует три способа выровнять текст с помощью HTML-кода:

  • При помощи атрибута тега p;
  • Выравнивание по центру при помощи тега center;
  • Выравнивание при помощи блоков div.

Выравнивание по краям HTML

По краям текст можно выровнять как при помощи тега p, так и при помощи тега div. Для этого используется атрибут align:

  • align=”right” – по правому краю;
  • align=”left” – по левому краю;

Например:

<p align="right">Конструктор сайтов "Нубекс"</p>  <div align="left">Конструктор сайтов "Нубекс"</div>

Здесь первое предложение выравнивается по правому краю при помощи тега p, второе – по левому краю при помощи тега div.

Выравнивание по ширине HTML

По ширине текст также может быть выравнен при помощи тегов p и div:

<p align="justify">Конструктор сайтов "Нубекс"</p>  <div align=" justify ">Конструктор сайтов "Нубекс"</div>    

HTML выравнивание по центру

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

<p align="center">Конструктор сайтов "Нубекс"</p>  <div align=" center ">Конструктор сайтов "Нубекс"</div>  <center>Конструктор сайтов "Нубекс"</center>

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

Конечно, более «красиво» делать выравнивание с помощью CSS. Рассмотрим способ выравнивания текста при помощи CSS:

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Выравнивание текста с помощью CSS</title>   <style>   .right {   text-align: right;   }   </style>   </head>   <body>  <div class="right">Конструктор сайтов "Нубекс"</div>   </body>  </html>

Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.

nubex.ru

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


Табл. 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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Для установки выравнивания текста обычно используется тег абзаца <p> с атрибутом align, который определяет способ выравнивания. Также блок текста допустимо выравнивать с помощью тега <div> с аналогичным атрибутом align, как показано в табл. 2.



Табл. 2. Выравнивание текста с помощью параметра align
Код HTML Описание
<p>Текст</p> Добавляет новый абзац текста, по умолчанию выровненный по левому краю. Перед абзацем и после него автоматически добавляются небольшие вертикальные отступы.
<p align="center">Текст</p> Выравнивание по центру.
<p align="left">Текст</p> Выравнивание по левому краю.
<p align="right">Текст</p> Выравнивание по правому краю.
<p align="justify">Текст</p> Выравнивание по ширине.
<nobr>Текст</nobr> Отключает автоматический перенос строк, даже если текст шире окна браузера.
Текст<wbr> Разрешает браузеру делать перенос строки в указанном месте, даже если используется тег <nobr>.
<div align="center">Текст</div> Выравнивание по центру.
<div align="left">Текст</div> Выравнивание по левому краю.
<div align="right">Текст</div> Выравнивание по правому краю.
<div align="justify">Текст</div> Выравнивание по ширине.

Выравнивание элементов по левому краю задано по умолчанию, поэтому указывать его лишний раз необходимости нет. Так что align="left" можно опустить.

Отличие между абзацем (тег <p>) и тегом <div> в том, что в начале и конце параграфа появляется вертикальный отступ, чего нет в случае использования тега <div>.

Атрибут align достаточно универсален и может применяться не только к основному тексту, но и к заголовкам вроде <h1>. В примере 1 показано, как в подобном случае устанавливать выравнивание.

Пример 1. Выравнивание текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E.    
абаритными размерами льва, но при этом меньше размера клетки. Далее простым перебором определяем участок, в котором находится лев, что автоматически приводит к его поимке.</p> <p align="right"><strong>Метод дихотомии</strong></p> <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем до тех пор, пока лев не окажется пойман.</p> </body> </html>

Результат примера показан на рис. 1.

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

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

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

htmlbook.ru

Точка отсчёта


<style>  .vyrovnyat {   background: #fff5d7;   text-align: center;   height: 7em;  }  </style>    <div class="vyrovnyat"> выровнять текст по вертикали </div>

Выравнивание однострочного текста или картинки

Свойство line-height CSS определяет междустрочный интервал и подходит при использовании одной строки.

<style>  .vyrovnyat {   background: #fff5d7;   text-align: center;   height: 7em;    line-height: 7em;  }  </style>    <div class="vyrovnyat"> выровнять текст по вертикали </div>

vertical-align: middle

vertical-align выравнивает встроенный элемент или с display: table-cell; по вертикали

<div class="vyrovnyat">  какой-то текст <span style="vertical-align: middle; font-size: 28px;">font-size:28px</span> какой-то текст  </div>
<style>  .vyrovnyat {    background: #fff;    text-align: center;    height: 100%;  }    .vyrovnyat span{    vertical-align: middle;    display: inline-block;    height: 100%;  }  </style>    <div class="vyrovnyat">  какой-то текст <span>первая строка <br /> вторая строка</span> какой-то текст  </div>
<table style="width: 100%; height: 100%; background: #fff5d7; text-align: center;">  <tbody>    <tr>      <td> какой-то текст </td>      <td> первая строка <br /> вторая строка </td>      <td> какой-то текст </td>    </tr>  </tbody>  </table>
какой-то текст первая строка 
вторая строка
какой-то текст

<style>  .vyrovnyat {   background: #fff5d7;   text-align: center;   height: 100%;   width: 100%;   display: table;  }    .vyrovnyat span{   vertical-align: middle;   display: table-cell;  }  </style>    <div class="vyrovnyat">   <span>какой-то текст</span>    <span>первая строка <br /> вторая строка</span>   <span>какой-то текст</span>  </div>

position: absolute

position: absolute; в сочетании с margin выравнивает по центру только div с фиксированными значениями.

<style>  .blok {   position: relative;   height: 7em;   background-color: #fff5d7;   text-align: center;  }  .blok div {   position: absolute;   top: 50%; /* располагаем блок по середине */   width: 100%;   background-color: #99ff99;   height: 4em;   margin-top: -2em; /* поднимаем на половину высоты */  }  </style>    <div class="blok"><div>первая строка</div></div>

Для резинового блока, заданного в процентах применяется position: absolute; с transform: translate.


<style>  .blok1 {   position: relative;   height: 7em;   background-color: #fff5d7;   text-align: center;  }  .blok1 div {   position: absolute;   top: 50%;   left: 50%;  /* располагаем блок по середине */   width: 50%;   height: 50%;   background-color: #99ff99;   transform: translate(-50%, -50%); /* поднимаем на половину высоты */  }  </style>    <div class="blok1"><div>первая строка</div></div>

Для изображений аналогично.

 

web.frubuk.ru

Использование свойства CSS

Можно отцентрировать текст при помощи CSS задав элементу, который должен быть отцентрирован, свойство text-align.

Центрирование нескольких блоков текста

Если у вас один или несколько текстов по центру блока CSS, которые необходимо отцентрировать, можно сделать это, добавив атрибут style к открывающему тегу элемента и использовав свойство text-align. В примере, приведенном ниже, мы добавили их к тегу <p>:

Заметьте, что для свойства text-align мы установили значение center, которое означает, что элемент необходимо выровнять по центру.

Несколько блоков текста

Как выровнять текст по центру CSS, если много блоков текста? Вы можете использовать тег <style></style> в секции head (или во внешней таблице стилей), чтобы отцентрировать каждый элемент.


Текст будет отцентрирован внутри каждой пары тегов <p></p>. Если необходимо выровнять по центру только несколько параграфов, тогда можно создать класс CSS, как это показано ниже:

Если вы создадите класс center, как показано в предыдущем примере, параграф может быть отцентрирован с помощью приведенного ниже кода, который «вызывает» класс center:

Совет: Созданный класс для CSS выравнивания текста по центру блока можно использовать для любого HTML-тега. Например, если вы хотите, чтобы заголовок располагался по центру, добавьте class=»center» в тег <h1>.

Перевод статьи “HOW TO CENTER TEXT IN HTML” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.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 и его детища <center> и align

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

Что касается валидации (данный термин подробно описан в статье «Как проверить html код на ошибки»), то в самой спецификации html осуждается использование <center>, так как для валидности необходимо использовать переходной <!DOCTYPE>.

Такой тип <!DOCTYPE> пропускает запрещенные элементы.

Теперь перейдем к атрибуту align. Он задает горизонтальное выравнивание объектов на страницах сайтов и вписывается после объявления тега. Обычно с его помощью контент можно выровнять по левому краю (left), по правому краю (right), по центру (center) и по ширине текста (justify).

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

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

В примере я использовал align=»middle». Благодаря этому изображение выровнялось так, что предложение расположилось четко посредине картинки.

Инструменты центрирования в 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 Делает элемент подстрочным.

romanchueshov.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

Анонимный
Спасибо!!!
NMitra
Пожалуйста! С праздниками!
Анонимный
это невероятно, это охуенный сайт, однозначно в закладки!!11одинодин
NMitra
Радостно слышать 🙂
Анонимный
Спасибо помог!
NMitra
Рада стараться 🙂
Анонимный
Спасибо, долго не мог решить проблему выравнивания тега div по центру, а здесь я нашел все ответы)
Вячеслав
div по центру… к примеру есть div — center

HTML:
div class="center"
Ваша информация
/div

CSS:
( .center{
width:980px;
height:auto;
margin-left:auto;
margin-right:auto;
float:center;
}

Задаем вопросы на нашем форуме: forum.uss.name

NMitra
И мы неправильно на них ответим. Какой ещё float:center; ??
Елена и Александр Никитины
Здравствуйте!
Подскажите как вот здесь http://www.spo565.ru/2014/03/blog-post_9510.html выровнять каталог, чтобы он одинаково справа и слева вылазил за пределы ширины блога
NMitra
Здравствуйте, попробуйте так

iframe[src^="http://ru.oriflame.com] {
position: relative;
left: -106px;
}

У вас сайт фиксированный, поэтому из ширины каталога нужно вычесть ширины блока с содержанием и поделить на два.

Елена и Александр Никитины
Наталья, вы меня конечно извините, а куда этот код вставить?
NMitra
Это стиль CSS. Добавлять так http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
Елена и Александр Никитины
Наталья, и первый и второй вариант попробовал, никаких изменений не произошло. Вообще никаких, странно…
Елена и Александр Никитины
Оставил первый вариант: изменения в коде шаблона перед ]]>. http://www.spo565.ru/2014/03/blog-post_9510.html
Елена и Александр Никитины
Перед ]]>
NMitra
Кавычки забыла:

iframe[src^="http://ru.oriflame.com"] {

Елена и Александр Никитины
Наталья, вы-ЭКОНОМИСТ!!! нашего времени и нервов! Спасибо Вам огромное!
…теперь пытаюсь Хлебные крошки победить, вроде ваш материал изучил, но с чего начать и как их запустить…
NMitra
С чего нибудь)) Наверно уже не смогу более подробно объяснить.
Анонимный
Спасибо!
Анонимный
Тема поста: Как выровнять div по центру в HTML
А содержание: выравнивание текста внутри div
NMitra
Вы не правы, div выравнивается по горизонтали. Ему можно задать разные значения свойства display. И поэтому выравнивание зависит в том числе от родителя. Думаю, вам будет интересна эта статья http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html

Названием я лишь пытаюсь предугадать как будут искать посетители. Чаще они задают не вопрос "Выравнять блок по горизонтали", а "Как выровнять блок по центру".

Анонимный
Интересно, работает, но не понятен сам механизм: каким образом свойство 'margin: 0 auto' выравнивает блок по ценру? Сможете объяснить?
NMitra
Посмотрите тут http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-auto
Если не вразумительно объяснила, обязательно скажите, попробую ещё раз
Анонимный
Посмотрите тут: http://ledcl.ru/info/programs_instr.html Как в самом низу стрелку выровнять по правому краю?
NMitra
.button_up a {
float: right;
}
Анонимный
Спасибо!
Alex
Огромное СПАСИБИЩЕ!!!
NMitra
Благодарю за комментарии! Побольше бы таких!
Леонид Гаврилов
Сиэсэс — это сила!
NMitra
Угу 🙂
Андрей Лукницкий
Спасибо большое всё получилось.
Анонимный
Здравствуйте!
Такой вопросик.

//div style="width:77%; height:555px; margin:0 auto; border:3px solid red;"\
//div style="width:100%; height:55px; background-color:green;" \

//select style="width:177px; float:left; "\
//option\lev//option\
//select\
//select style="width:177px; float:right; "\
//option\prav//option\
//select\
//select style="width:177px; display:block; margin:0 auto; overflow: auto; "\
//option\seredina//option\
//select\

//div\
//div\

Всё красиво и хорошо. Но мне надо что-бы при уменьшении экрана. Эти селекторы становились в столбик. Ну ни как не получается. Если можете, подскажите как. Буду очень благодарен.

NMitra
Здравствуйте! Проще всего использовать @Media http://shpargalkablog.ru/2010/12/shirina-saita-css.html
Анонимный
Спасибо Вам.
Я в принципе этим всегда и пользуюсь. Но опять проблема с ИЕ. Там приходится ЯваСкриптом отслеживать. Думал вы сможете подсказать, как это можно реализовать просто, правильно задав стили. Ведь это у Вас получается ну очень хорошо. Ладно, спасибо Вам. Порою ещё.
NMitra
Остальное точно в старых IE не будет работать 🙂
Анонимный
Благодарю Вас.
Я тут как бы один способ полу нарыл додумал. Как это можно было сделать с таблицей и немного ЯваСкрипт. Но одна проблемка. Ещё подумаю, порою. Если не получится. Можно Вам сюда ещё напишу, может у Вас будет какая мысль?
Пошёл дорывать, думать.
NMitra
Конечно. Только одна просьба: сбрасывайте примеры на https://jsfiddle.net/ Всё равно я потом там смотрю результат
Анонимный
Значит так. В первом варианте работает только. Когда экран фактически имеет такой размер. Потому как, при загрузке страницы считывается размер и через document.wrire(); выводится результат если попало на ИФ.

Вот если есть какой-то способ вместо document.wrire(); как-то иначе отображать. Тогда всё было бы хорошо.

https://jsfiddle.net/81r5ufye/

Поэтому думал и нашёл вроде что-то. Уже казалось СУПЕР. Но проблема что нам надо не открывающий tr и закрывающий tr. А наоборот. закрывающий tr и потом открывающий tr.
Значит не то.
https://jsfiddle.net/znko0w45/

Примерно так. Если будет возможность и желание, гляньте. Может что придумается.

До свидания.

Анонимный
Извините, ещё дополню.
Во втором способе.
Оказывается и простая вставка tr /tr если написана перед загрузкой превращает их в столбик. Но после загрузки. Новый элемент появляется но остальные никак не реагируют.

NMitra
Вопрос возник: @Media не работает на старых IE. А их нет на мобильных. Зачем тогда мучиться?
NMitra
Ммм, вспомнила, что text-align-last: justify; поддерживается на самых древних IE Как раз ваш вариант Для Opera можно применить трюк с :after и :before http://shpargalkablog.ru/2013/07/justify.html
Анонимный
Спасибо Вам огромное. Будет время. Подумаю, посмотрю.
Напишу что получается.

shpargalkablog.ru


You May Also Like

About the Author: admind

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

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

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

Adblock
detector