Содержание

Выравнивание текста | htmlbook.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 достаточно универсален и может
применяться не только к основному тексту, но и к заголовкам вроде <h2>.
В примере 1 показано, как в подобном случае устанавливать выравнивание.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2> 
  <p align="right"><strong>Метод перебора</strong></p> 
  <p>Делим пустыню на ряд элементарных участков, размер которых совпадает 
  с габаритными размерами льва, но при этом меньше размера клетки.  Далее простым 
  перебором определяем участок, в котором находится лев, что автоматически приводит 
  к его поимке.</p>
  <p align="right"><strong>Метод дихотомии</strong></p>
  <p>Делим пустыню на две половины. В одной части - лев, в другой его нет. 
  Берем ту половину, в которой находится лев, и снова делим ее пополам. Так повторяем 
  до тех пор, пока лев не окажется пойман.</p>
 </body>
</html>

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

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

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

text-align | htmlbook.ru

CSSInternet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.16. 0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+
3 2.0+11.6+3.1+3.6+2.1+2.0+

Краткая информация

Версии CSS

Описание

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

Синтаксис

CSS2.1
text-align: center | justify | left | right | inherit
CSS3
text-align: center | justify | left | right | start | end

Значения

center
Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде подрисуночных, он придает официальный и солидный вид оформлению текста.
Во всех других случаях выравнивание по центру применяется редко по той причине,
что читать большой объем такого текста неудобно.
justify
Выравнивание по ширине, что означает одновременное выравнивание по левому
и правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.
left
Выравнивание текста по левому краю. В этом случае строки текста выравнивается
по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.
right
Выравнивание текста по правому краю. Этот способ выравнивания выступает
в роли антагониста предыдущему типу. А именно, строки текста равняются по
правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен,
а именно с него начинается чтение новых строк, такой текст читать труднее,
чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому
краю применяется обычно для коротких заголовков объемом не более трех строк.
Мы не рассматриваем специфичные сайты, где текст приходится читать справа
налево, там возможно подобный способ выравнивания и пригодится.
auto
Не изменяет положение элемента.
inherit
Наследует значение родителя.
start
Аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево.
end
Аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-align</title>
  <style>
   div {
    border: 1px solid black; /* Параметры рамки */
    padding: 5px; /* Поля вокруг текста */
    margin-bottom: 5px; /* Отступ снизу */
   }
   #left { text-align: left; }
   #right { text-align: right; }
   #center { text-align: center; }
   . content {
    width: 75%; /* Ширина слоя */
    background: #fc0; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <div><div>Выравнивание по левому краю</div></div>
  <div><div>Выравнивание по центру</div></div>
  <div><div>Выравнивание по правому краю</div></div>
 </body>
</html>

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

Рис. 1. Выравнивание текста в браузере Safari

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

Рис. 2. Выравнивание текста в браузере Internet Explorer 7

Объектная модель

[window.]document.getElementById(«elementID»).style.textAlign

Браузеры

IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.

Выравнивание текста | htmlbook.ru

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

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

  • left — выравнивание по левому краю, задается по умолчанию;
  • right — выравнивание по правому краю;
  • center — выравнивание по центру;
  • justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для текста, длина которого более, чем одна строка.

Атрибут align можно применять как для текста, так и для заголовков (пример 7. 4).

Пример 7.4. Способы выравнивания текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание текста</title>
 </head>
 <body>
  <h2 align="center">Как поймать льва?</h2>
  <h3 align="right">Метод перебора</h3>
  <p align="justify">Делим пустыню на ряд элементарных участков, размер 
   которых совпадает с габаритными размерами льва, но при этом меньше размера 
   клетки. Далее простым перебором определяем участок, в котором находится лев,
   что автоматически приводит к его поимке.</p>
  <h3 align="right">Метод дихотомии</h3>
  <p align="justify">Делим пустыню на две половины. В одной части - лев, в 
   другой его нет. Берем ту половину, в которой находится лев, и снова делим 
   ее пополам. Так повторяем до тех пор, пока лев не окажется пойман. </p>
 </body>
</html>

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

Рис. 7.4. Вид текста при его выравнивании

Как переместить текст вправо в HTML?

Я знаю, что, добавляя style="right: 100px;" к изображению, он может немного сдвинуть изображение вправо. Как я могу сделать это с текстом, Я хочу переместить текст на 100 пикселей вправо. Я бы предпочел не использовать CSS, но если придется, то все в порядке.

html

css

image

Поделиться

Источник


user2426533    

21 июня 2013 в 01:52

3 ответа

  • Как переместить текст раздела UItableView слева направо?

    Я нашел несколько ответов о том, как можно переместить текст ячейки вправо, но как я могу переместить текст раздела вправо?

  • Как переместить выделенный текст влево или вправо

    Я не могу поверить, что не могу найти способ в Webstorm, чтобы, когда вы выделяете код, затем перемещаете его вправо или влево как группу (вкладка влево или вправо, перемещая его влево или вправо). Есть ли способ сделать это? Я не могу его найти. Мне нужно переместить несколько строк кода в JSON…


7

Это еще один подход для людей (таких как я), которые не входят в свойство position CSS:

#my-text {
    float: right;
    margin-right: 100px;
}

/* or an inline style */
style="float: right; margin-right: 100px;"

Поделиться


kevinandrada    

21 июня 2013 в 06:13


4

Используйте относительное положение:

#yourText {
    position: relative;
    left: -100px;
}

Это расположит его относительно того места, где он был раньше.

Поделиться


tckmn    

21 июня 2013 в 01:53


1

Вы хотите управлять стилем содержимого вашей страницы. Поэтому вы должны использовать CSS.

Ответы на дверные ручки совершенно хороши (и, вероятно, являются правильными), но вы также можете установить отрицательное поле (обратите внимание, что его атрибут position останется static )

#yourText {
    margin-left: -100px;
}

или

style="margin-left: -100px;"

Поделиться


Jerska    

21 июня 2013 в 02:09

Похожие вопросы:

HTML как переместить кнопку вправо

Извините, если вопрос глупый, потому что я всего лишь новичок в HTML. Как переместить мою кнопку вправо? Я пробовал некоторые способы, но это, кажется, не работает. Вот мой код. <!DOCTYPE…

Android:how чтобы переместить текст шатра справа налево и влево и вправо, нажмите одну кнопку

как переместить текст шатра справа налево и влево и вправо, нажав одну кнопку, как я могу это сделать, может ли кто-нибудь мне помочь?

css-переместить текст вправо

Это то, что меня очень часто раздражает. Если вы создаете <div> и стилизуете границу (например, border-radius: 3px; ), текст находится почти поверх границы, что выглядит очень плохо….

Как переместить текст раздела UItableView слева направо?

Я нашел несколько ответов о том, как можно переместить текст ячейки вправо, но как я могу переместить текст раздела вправо?

Как переместить выделенный текст влево или вправо

Я не могу поверить, что не могу найти способ в Webstorm, чтобы, когда вы выделяете код, затем перемещаете его вправо или влево как группу (вкладка влево или вправо, перемещая его влево или вправо)….

Переместить текст в EditText вправо

Я хочу, чтобы текст в EditText переместился вправо. Потому что если не первая буква, то она покрыта границей EditText.

Как я могу переместить текст в текстовом представлении типа 10dp вправо?

Я хочу переместить текст, например 10dp вправо, не TextView, а письменный текст + курсор. Как я могу это сделать? Спасибо. Hallo находится слишком близко к границе

HTML текст расширяется полностью вправо

Я читаю текстовый документ и печатаю его на своей веб-странице, но текст идет полностью вправо, и я не хочу прокручивать его полностью вправо . <!DOCTYPE html> <html> <head>…

как я могу переместить контейнер вправо

как я могу переместить контейнер вправо? У меня есть 3 значка, и мне нужно переместить последний значок вправо, чтобы 2 других значка были слева Я пишу приложение для flutter пример сообщения из…

Как переместить текст в пределах <div> (вертикально и горизонтально)?

Полный новичок здесь! Я пытаюсь переместить какой-то текст (h4) немного вправо на своей веб-странице и не знаю, как это сделать? Кроме того, должен ли я использовать CSS или есть способ для HTML…

Вручную переместить текст вверх html

Я очень новичок в HTML и только начал делать свой первый сайт. Мне просто было интересно, как можно было бы переместить текст через HTML, а не CSS, говорят, что картинка стоит тысячи слов:

Итак, моя цель состоит в том, чтобы поместить текст с надписью ‘Typography’ в первое красное поле, а rest-в Красное поле под ним.

Есть ли способ сделать это только с HTML, или я должен написать какой-нибудь фанк CSS, чтобы справиться с этим?

html

css

formatting

Поделиться

Источник


Bob Choibob    

08 сентября 2014 в 23:00

2 ответа

  • Как переместить текст вверх в строке вкладок?

    У меня есть панель вкладок в нижней части приложения, и каждый элемент панели вкладок имеет заголовок. Как я могу переместить каждый этот заголовок вверх или вниз?

  • html переместить текст вверх анимировать из начальной позиции

    Я пытаюсь понять, как я могу заставить текст плавать вверх от начальной позиции в слайд-шоу. Например, как OnGuardian делает на своем сайте. Я пробовал CSS animated и w3 animate, но проблема в том, что он не перемещается вверх из заданного положения, а просто перемещается снизу вверх в исходное…


1

Да, CSS необходим, потому что стиль по умолчанию в каждом крупном браузере делает именно то, что вы себе представили. Если элементы inline-block , они выравниваются по нижней части предыдущего img , div или другого элемента. (Технически, предыдущий элемент также будет выровнен по нижней части следующего элемента, если следующий элемент выше. Так что на самом деле все более короткие элементы выравниваются по нижней части самого высокого элемента, если они находятся в ряду.) Чтобы выровнять их по верху, вы должны установить свойство vertical-align на предыдущее img или div .

Вот очень простой пример этого.

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

Таким образом, мы делаем это.

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

Другие изменения стиля, такие как дальнейшее отделение p от h2 , могут быть сделаны с помощью правил margin или padding CSS.

Поделиться


Chase Ries    

08 сентября 2014 в 23:11


0

Вот лучший способ, который я нашел

<!DOCTYPE html>
<head>

<style>
#RedBoxOneText{font-size:30px; margin:45px 280px; color:red; position:absolute;}
#RedBoxTwoText{font-size:18px; margin:130px 280px; color:blue; position:absolute; width:500px;}
</style>


</head>
<body>

<div>Typography</div>
<div>Typography text box with random words words words words words words words words words</div>

<img src="http://s28. postimg.org/8jvt54zy5/Screen_Shot_2014_09_08_at_3_45_31_PM.png">


</body>

«Position:absolute;» гарантирует, что указанный div плавает над всем простым способом

«Margin:45px 280px;» делает текст плавающим в заданных координатах

«width:500px;» для КРАСНОГО ПОЛЯ ДВА делает невидимую границу, обернутую вокруг текста, делая ее больше, текст будет отлетать от изображения по прямой линии в зависимости от того, сколько пикселей вы его тоже установили

«font-Size:28px;» делает размер текста больше или меньше в зависимости от значения, которое вы туда поместили

Надеюсь, это поможет 🙂

Поделиться


AntonioSanchez    

08 сентября 2014 в 23:27

Похожие вопросы:

Как переместить Нижний textFields вверх, когда появится ключевая доска?

поля на мой взгляд, я хочу переместить свой текстовый вид вверх, когда появится клавиатура, когда я начну вводить текст в 6-м, 7-м, 8-м текстовых полях.

Переместить элемент вверх в IEnumerable

У меня есть потребность переместить элемент в IEnumerable<> вверх, то есть переместить один элемент над другим. Какой самый простой способ сделать это? Аналогичный вопрос был задан здесь, но у…

Как переместить текст вверх в UITextView

Я добавил UITextView в моем представлении, которое охватывает более 80% всего моего представления. Когда я нажимаю на текстовый вид и начинаю редактировать его, после того как несколько строк текста…

Как переместить текст вверх в строке вкладок?

У меня есть панель вкладок в нижней части приложения, и каждый элемент панели вкладок имеет заголовок. Как я могу переместить каждый этот заголовок вверх или вниз?

html переместить текст вверх анимировать из начальной позиции

Я пытаюсь понять, как я могу заставить текст плавать вверх от начальной позиции в слайд-шоу. Например, как OnGuardian делает на своем сайте. Я пробовал CSS animated и w3 animate, но проблема в том,…

Кнопка «Переместить Вверх Treeview» Выбирает Родительский Узел

У меня есть простой TreeView, связанный с XMLDocument. Я сделал несколько кнопок, которые перемещают элементы вверх/вниз по дереву. Они работают так, как задумано, но раздражающим следствием…

Как переместить элемент вверх и вниз в wxListCtrl (wxwidgets)

Это должно быть довольно легко,но у меня чертовски много времени. В основном я хочу переместить строку в моем wxListCtrl вверх или вниз. Я опубликовал это на форуме wxwidgets и получил следующий…

Как переместить текст вверх с помощью CSS, когда ничего не работает

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

Рафаэль как переместить текст

У меня есть кое-какой текст, и я хочу переместить его вверх, используя библиотеку Рафаэля. Однако есть ли также способ переместить его вверх через 3 секунды или что-то в этом роде? var t1 =…

Переместить элемент HTML вверх при наведении курсора

Я пытаюсь переместить HTML примерно на 10 пикселей вверх всякий раз, когда пользователь наводит на него курсор мыши. Я провел некоторые исследования по w3schools, но не смог найти никакой…

Как выровнять текст при помощи 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>Конструктор сайтов "Нубекс"</div>
 </body>
</html>

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

Смотрите также:

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

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

Центрирование

Общая функция CSS — центрирование текста или изображения.
Фактически, существует три вида центрирования:

В последних реализациях CSS вы можете также использовать
возможности Уровня 3 (CSS3), позволяющие выровнять по центру
абсолютно позиционированные элементы:

Центрирование строк текста

Самый распространённый и (потому) самый лёгкий тип центрирования
— это центрирование строк текста в абзаце или заголовке. Для этого
CSS обладает свойством ‘text-align’:

P { text-align: center }
h3 { text-align: center }

которое отображает каждую строку в абзаце P или заголовке h3 по
центру между полями, вот так:

Все строки в этом абзаце выровнены
по центру полями абзаца. Это стало возможным благодаря значению
‘center’ свойства CSS ‘text-align’.

Центрирование блока или изображения

Иногда центрировать нужно не текст, а блок в целом. Или,
по-другому говоря: мы хотим, чтобы правое и левое поля были
одинаковыми. Для этого нужно установить поля на ‘auto’. Это обычно
используется для блоков с фиксированной шириной, потому что если
блок сам по себе гибкий, он просто займёт всю доступную ширину. Вот
пример:

P.blocktext {
    margin-left: auto;
    margin-right: auto;
    width: 6em
}
...
<P>Этот довольно ...

Этот довольно узкий блок текста центрирован.
Заметьте, что строки внутри блока не центрированы (они выровнены
влево), в отличие от предыдущего примера.

Этот метод также можно использовать для центрирования
изображения: поместите его в собственный блок и примените свойства
полей. Например:

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG src="..." alt="...">

Следующее изображение центрировано:

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

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

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

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

Этот маленький абзац центрирован вертикально.

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

Уровень 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 */

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

  1. Сделайте контейнер относительно позиционированным
    (position: relative), что превратит его в контейнер для абсолютно
    позиционированных элементов.

  2. Сам элемент сделайте абсолютно позиционированным
    (position: absolute).

  3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
    (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

  4. Используйте translate, чтобы переместить элемент вверх на
    половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
    указывают на высоту самого элемента.)

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

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

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

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

Вертикальное и горизонтальное центрирование в 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’ состоит в том, что дочерний элемент, в нашем случае это Р,
автоматически становится настолько малым, насколько это возможно.

Центрирование в области просмотра в CSS уровня 3

Контейнером по умолчанию для абсолютно позиционированных
элементов является область просмотра. (В случае c браузером это
окно браузера). Таким образом, центрирование элемента в области
просмотра не вызывает сложности. Далее приведен полный пример. (В
этом примере использован синтаксис HTML5.)

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h2>Красиво выровнен по центру</h2>
    <p>Этот текстовый блок выровнен вертикально по центру.
    <p>И горизонтально, если окно достаточно широкое.
  </section>

Вы можете увидеть результат в отдельном
документе.

Правило ‘margin-right: -50%’ необходимо для компенсации ‘left:
50%’. Правило ‘left’ уменьшает доступную для элемента ширину на
50%. Поэтому визуализатор постарается сделать линии длиною не более
половины ширины контейнера. Указав на то, что правое поле элемента
находится правее на ту же самую величину, отметим, что максимальная
длина линии снова равняется ширине контейнера.

Попробуйте изменить размер окна: вы увидите, что каждое
предложение находится на одной строке, когда окно достаточно
широкое. Только тогда, когда окно слишком узкое для всего
предложения, это предложение будет разбито на несколько строк.
Когда вы удалите правило ‘margin-right: -50%’ и снова измените
размер окна, вы заметите, что предложения будут уже разбиты, хотя
окно все еще шире строк текста в два раза.

(Использование свойства ‘translate’ для центрирования в области
просмотра было впервые предложено “Charlie” в ответе на сайте Stack Overflow.)

Навигация по сайту

CSS свойство text-align-last

Пример

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

:

дива
{
выравнивание текста: выравнивание; / * Для Edge * /
выравнивание текста последний: право;
}

div.b
{
выравнивание текста: выравнивание; / * Для Edge * /
выравнивание текста последний: центр;
}

div.c
{
выравнивание текста: выравнивание; / * Для Edge * /
text-align-last: justify;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-align-last указывает, как выровнять последнюю строку текста.

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

с тремя абзацами в нем, text-align-last
будет применяться к последней строке КАЖДОГО параграфа. Чтобы использовать text-align-last
только для последнего абзаца в контейнере вы можете использовать: last child, см.
пример ниже.

Примечание: В Edge до 79 свойство text-align-last работает только с текстом, который
имеет «выравнивание текста: выравнивание».

Значение по умолчанию: авто
Унаследовано: да
Анимация: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.textAlignLast = «право»
Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Имущество
выравнивание текста последний 47,0 5,5 * 49.0
12,0 -моз-		 Не поддерживается 34,0

* В Internet Explorer 11 (и более ранних версиях) значения «начало» и «конец»
не поддерживаются.

Синтаксис CSS

выравнивание текста последний: авто | слева | справа | центр | выравнивание | начало | конец | начальный | наследование;

Стоимость недвижимости

Значение Описание Играй
авто Значение по умолчанию.Последняя строка выровнена и выровнена по левому краю Играй »
слева Последняя строка выровнена по левому краю Играй »
правый Последняя строка выровнена по правому краю Играй »
центр Последняя строка выровнена по центру Играй »
оправдать Последняя строка выровнена как остальные строки Играй »
начало Последняя строка выравнивается по началу строки (слева, если направление текста слева направо, и справа, если направление текста справа налево) Играй »
конец Последняя строка выравнивается по концу строки (справа, если направление текста слева направо, а слева — направление текста справа налево) Играй »
начальный Устанавливает для этого свойства значение по умолчанию.Читать примерно начальная Играй »
наследовать Наследует это свойство от своего родительского элемента. Прочитать про унаследовать

Другие примеры

Пример

Используйте text-align-last только в самой последней строке в контейнере:

div.b p: последний ребенок {
выравнивание текста последний: центр;
}

Попробуй сам »

Связанные страницы

Учебник

CSS: CSS Text

Ссылка на HTML DOM: свойство textAlignLast

Как выравнивать текст в HTML по левому, правому и центру

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

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

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

Источник изображения

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

В этом посте мы рассмотрим, как выравнивать текст по левому, правому и центру текста с помощью HTML и CSS.

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

Поскольку выравнивание — это тип стиля страницы, лучший способ выровнять HTML-содержимое на странице — использовать свойство text-align CSS. text-align устанавливает горизонтальное выравнивание содержимого внутри блочного элемента (т. Е. Элемента, который начинает новую строку и занимает всю ширину страницы, например

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

Свойство text-align можно использовать во встроенном CSS, внутреннем или внешнем CSS. Встроенный CSS означает, что ваш HTML и CSS будут помещены вместе в основной раздел вашего HTML-документа. Так что технически вы будете выравнивать текст «в HTML».

Однако внутренний и внешний CSS рекомендуется использовать вместо встроенного CSS. Это связано с тем, что разделение кода стиля (CSS) от кода содержимого (HTML) означает, что вы можете легко вносить изменения содержимого в будущем, не влияя на стиль страницы, и наоборот.

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

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

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

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

Источник изображения

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

См. Pen text-align: center 1 Кристины Перриконе (@hubspot) на CodePen.

Теперь предположим, что я хочу центрировать кнопку на странице. Поскольку кнопка HTML является встроенным элементом, а не элементом уровня блока, свойство text-align нельзя использовать непосредственно на кнопке для ее центрирования. Вместо этого мы можем поместить кнопку в div, общий элемент уровня блока, а затем применить text-align: center к этому контейнеру div:

См. Pen text-align: center 2 Кристины Перриконе (@hubspot) на CodePen.

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

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

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

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

HTML по умолчанию выравнивает содержимое по левому краю, поэтому во многих случаях вам не нужно использовать свойство text-align для достижения этого эффекта.

См. Pen text-align: left 1 Кристины Перриконе (@hubspot) на CodePen.

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

Для выравнивания по левому краю в CSS используйте правило CSS text-align: left . В приведенном ниже примере элемент div настроен на центрирование всего содержимого внутри него. Однако, когда мы применяем text-align: left ко второму абзацу, это переопределяет стиль div:

См. Pen text-align: left 2 от Кристины Перриконе (@hubspot) на CodePen.

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

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

Вот пример поразительного эффекта, который может иметь текст, выровненный по правому краю:

Источник изображения

Допустим, мы хотим выровнять все заголовки на странице по правому краю.Мы можем применить правило CSS text-align: right ко всем h3, чтобы выровнять их по правому краю:

См. Pen text-align: right авторства Кристины Перриконе (@hubspot) на CodePen.

Выравнивание текста с помощью HTML и CSS

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

Примечание редактора: этот пост был первоначально опубликован в августе 2020 года и был обновлен для полноты.

Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах

Выравнивание, стили шрифтов и горизонтальные правила в HTML-документах

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

15.1 Форматирование

15.1.1 Фон
цвет

Определения атрибутов

bgcolor = цвет [CI]
Не рекомендуется. Это
атрибут устанавливает цвет фона для тела документа или ячеек таблицы.

Этот атрибут устанавливает цвет фона холста для тела документа.
(элемент BODY ) или для таблиц (элемент
ТАБЛИЦА , TR , TH и
Элементы TD ).Дополнительные атрибуты для указания цвета текста могут быть
используется с элементом BODY .

Этот атрибут устарел
в пользу таблиц стилей для указания информации о цвете фона.

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

Возможно выравнивание элементов блока (таблицы, изображения, объекты, абзацы,
и т. д.) на холсте с атрибутом align . Хотя это
атрибут может быть установлен для многих элементов HTML, его диапазон возможных значений
иногда отличается от элемента к элементу.Здесь мы только обсуждаем значение
атрибут выравнивания для текста.

Определения атрибутов

выровнять =
слева | по центру | справа | по ширине
[CI]
Не рекомендуется. Это
атрибут определяет горизонтальное выравнивание своего элемента относительно
окружающий контекст. Возможные значения:

  • слева : текстовые строки отображаются заподлицо слева.
  • по центру : текстовые строки выровнены по центру.
  • справа : текстовые строки отображаются заподлицо справа.
  • выравнивание : текстовые строки выравниваются по обоим полям.

Значение по умолчанию зависит от основного направления текста. Для текста слева направо
по умолчанию align = left , а для текста справа налево значение по умолчанию
это align = right .

УСТАРЕВШИЙ ПРИМЕР:

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

 Как вырезать по дереву

Используя CSS, например, вы можете добиться такого же эффекта, как показано ниже:

<ГОЛОВА>
  Как резать по дереву 
 <СТИЛЬ тип = "текст / css">
  h2 {выравнивание текста: центр}
 
<ТЕЛО>
 
 Как вырезать из дерева

Обратите внимание, что это будет центрировать все объявления h2 .Вы можете уменьшить
объем стиля, установив
Атрибут class элемента:

<ГОЛОВА>
  Как резать по дереву 
 <СТИЛЬ тип = "текст / css">
  h2.wood {выравнивание текста: центр}
 
<ТЕЛО>
 
 Как вырезать из дерева

УСТАРЕВШИЙ ПРИМЕР:

Аналогичным образом, чтобы выровнять абзац на холсте по правому краю с помощью HTML , выровняйте
атрибут, который вы могли иметь:

 ...Много текста абзаца ...

, что с CSS будет:

<ГОЛОВА>
  Как резать по дереву 
 <СТИЛЬ тип = "текст / css">
  P.mypar {text-align: right}
 
<ТЕЛО>
 
  ... Много текста абзаца ...

УСТАРЕВШИЙ ПРИМЕР:

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


 
  ... текст в первом абзаце... 
 
  ... текст во втором абзаце ... 
 
  ... текст в третьем абзаце ...

В CSS свойство text-align наследуется от родительского элемента, вы
поэтому можно использовать:

<ГОЛОВА>
  Как резать по дереву 
 <СТИЛЬ тип = "текст / css">
  DIV.mypars {выравнивание текста: справа}
 
<ТЕЛО>
 

  
  ... текст в первом абзаце ... 
  
  ...text во втором абзаце ... 
  
  ... текст в третьем абзаце ...

Чтобы центрировать весь документ с помощью CSS:

<ГОЛОВА>
  Как резать по дереву 
 <СТИЛЬ тип = "текст / css">
  ТЕЛО {text-align: center}
 
<ТЕЛО>
   ... корпус центрируется ...

Элемент CENTER
в точности эквивалентен указанию элемента DIV с выравниванием align
атрибут установлен на «центр». Элемент CENTER устарел.

15.1.3 Плавающие объекты

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

Перемещение объекта


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

  • left: Перемещает объект к текущему левому полю. Последующий
    текст течет по правой стороне изображения.
  • right: Перемещает объект к текущему правому полю.
    Последующий текст перемещается по левой стороне изображения.

УСТАРЕВШИЙ ПРИМЕР:

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

 моя лодка

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

P и DIV , значение «center» приводит к тому, что содержимое
центрируемый элемент.

Обтекание объекта текстом

Другой атрибут, определенный для элемента BR , управляет
текстовое обтекание плавающих объектов.

Определения атрибутов

прозрачный =
нет | слева | справа | все
[CI]
Не рекомендуется.
Указывает, где следующая строка должна отображаться в визуальном браузере после строки
разрыв, вызванный этим элементом. Этот атрибут учитывает плавающие
объекты (изображения, таблицы и т. д.). Возможные значения:

  • нет: Следующая строка начнется нормально. Это по умолчанию
    стоимость.
  • осталось: Следующая строка начнется с ближайшей строки ниже любой
    плавающие объекты на левом поле.
  • справа: Следующая строка начнется с ближайшей строки ниже любой
    плавающие объекты на правом поле.
  • все: Следующая строка начинается с ближайшей строки ниже любой
    плавающие объекты на любом из полей.

Рассмотрим следующий визуальный сценарий, в котором текст перетекает справа от
изображение, пока линия не будет разорвана BR :

********* -------
| | -------
| изображение | - 

| |
*********

Если для атрибута clear установлено значение none , строка
следующий за BR начнется сразу под ним на правом краю
изображение:

********* -------
| | -------
| изображение | - 

| | ------
*********

УСТАРЕВШИЙ ПРИМЕР:

Если для атрибута clear установлено значение left или
все , следующая строка будет выглядеть следующим образом:

********* -------
| | -------
| изображение | - 

| |
*********
-----------------

Используя таблицы стилей, вы можете указать, что все разрывы строк должны вести себя
так для объектов (изображений, таблиц и т. д.) плавающий против левого поля.
С помощью CSS вы можете добиться этого следующим образом:

<СТИЛЬ тип = "текст / css">
BR {clear: left}

Чтобы указать это поведение для конкретного экземпляра BR
элемент, вы можете объединить информацию о стиле и
Атрибут id :

<ГОЛОВА>
  ... 
<СТИЛЬ тип = "текст / css">
BR # mybr {clear: left}


<ТЕЛО>

 ...
********* -------
| | -------
| стол | - 

| |
*********
-----------------
...

Следующие элементы HTML определяют информацию о шрифте. Хотя они
не все устарели, их использование
не рекомендуется в пользу таблиц стилей.

15.2.1 Элементы стиля шрифта:

TT , I , B ,
БОЛЬШОЙ ,
МАЛЫЙ ,
STRIKE , S и U Элементы

Начальный тег: требуется , Конечный тег:
требуется

Атрибуты, определенные в другом месте


  • id     , класс (идентификаторы на уровне документа)
  • lang (информация о языке),
    dir     (текст
    направление)
  • заголовок (элемент
    title)

  • стиль     (встроенный стиль
    информация)
  • onclick , ondblclick ,
    onmousedown     , onmouseup ,
    onmouseover     , onmousemove ,
    onmouseout     , onkeypress ,
    onkeydown     onkeyup (внутренние события)

Отображение элементов стиля шрифта зависит от пользовательского агента.Следующее
только информативное описание.

TT: Отображает как телетайп или моноширинный текст.
I: Отображает текст курсивом.
B: Отображает полужирный шрифт.
BIG: Отображает текст «крупным» шрифтом.
МАЛЕНЬКИЙ: Отображает текст «мелким» шрифтом.
STRIKE и S:
Устарело. Рендеринг зачеркнутого текста стиля.
U:
Устарело. Отображает подчеркнутый текст.

Следующее предложение показывает несколько типов текста:

  жирный ,
 курсив ,   жирный курсив  ,  текст телетайпа  и
 большой  и  маленький  текст.

Эти слова можно было бы передать следующим образом:

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

<ГОЛОВА>
<СТИЛЬ тип = "текст / css">
P # mypar {стиль шрифта: курсив; цвет синий}



  ... Много синего курсива ...

Элементы стиля шрифта должны быть правильно вложены. Отрисовка вложенного стиля шрифта
элементы зависят от пользовательского агента.

15.2.2 Модификатор шрифта
элементы:

FONT и BASEFONT

FONT и BASEFONT устарели.

См. Переходное DTD для
формальное определение.

Определения атрибутов

размер =
cdata [CN]
Не рекомендуется. Это
атрибут устанавливает размер шрифта. Возможные значения:

  • Целое число от 1 до 7. Устанавливает фиксированный размер шрифта,
    рендеринг зависит от пользовательского агента. Не все пользовательские агенты могут отображать все семь
    размеры.
  • Относительное увеличение размера шрифта.Значение «+1» означает на один размер больше. В
    значение «-3» означает на три размера меньше. Все размеры относятся к шкале от 1 до
    7.
цвет = цвет [CI]
Не рекомендуется. Это
атрибут устанавливает цвет текста.
лицо = cdata [CI]
Не рекомендуется. Это
атрибут определяет список имен шрифтов, разделенных запятыми, которые пользовательский агент должен
ищите в порядке предпочтения.

Атрибуты, определенные в другом месте


Элемент FONT изменяет размер шрифта и цвет текста в его
содержание.

Элемент BASEFONT устанавливает базовый размер шрифта (с использованием атрибута size ). Изменения размера шрифта достигнуты с помощью шрифта FONT
относительно базового размера шрифта, установленного параметром BASEFONT . Если
BASEFONT не используется, базовый размер шрифта по умолчанию — 3.

УСТАРЕВШИЙ ПРИМЕР:

Следующий пример покажет разницу между семью размерами шрифта.
доступно с ШРИФТА :

  size = 1 
 size = 2 
 size = 3 
 size = 4 
 size = 5 
 size = 6 
 size = 7

Это может быть представлено как:

Ниже показан пример влияния относительных размеров шрифта с использованием
базовый размер шрифта 3:

Базовый размер шрифта не применяется к заголовкам, за исключением
изменен с использованием элемента FONT с относительным изменением размера шрифта.

15.3 Правила:


HR элемент

Начальный тег: требуется , Конечный тег:
запрещено

Определения атрибутов

выровнять =
слева | в центре | справа [CI]
Не рекомендуется. Это
атрибут определяет горизонтальное выравнивание правила относительно
окружающий контекст. Возможные значения:

  • слева : правило отображается заподлицо слева.
  • по центру : линейка по центру.
  • справа : правило отображается заподлицо.

По умолчанию align = center .

без оттенка [CI]
Не рекомендуется. Когда
установлен, этот логический атрибут запрашивает, чтобы пользовательский агент отображал правило в
однотонный, а не в виде традиционной двухцветной «канавки».
размер = пикселей [CI]
Не рекомендуется. Это
атрибут определяет высоту правила. Значение по умолчанию для этого
Атрибут зависит от пользовательского агента.
ширина = длина [CI]
Не рекомендуется. Это
атрибут определяет ширину правила. Ширина по умолчанию — 100%, т.е.
правило распространяется на все полотно.

Атрибуты, определенные в другом месте


  • id     , класс (идентификаторы на уровне документа)
  • lang (информация о языке),
    dir     (текст
    направление)
  • заголовок (элемент
    title)

  • стиль     (встроенный стиль
    информация)
  • onclick , ondblclick ,
    onmousedown     , onmouseup ,
    onmouseover     , onmousemove ,
    onmouseout     , onkeypress ,
    onkeydown     , onkeyup (внутренние события)


Элемент HR вызывает отображение горизонтальной линейки визуальным пользователем.
агенты.

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

УСТАРЕВШИЙ ПРИМЕР:

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

Эти правила могут быть представлены следующим образом:

html — Как сдвинуть текст во встроенном блоке в CSS?

html — Как сдвинуть текст во встроенном блоке в CSS? — Переполнение стека

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено
183 раза

Я пытаюсь переместить текст состояния / действий влево, но как бы сильно я ни работал с CSS, ничего не работает!
Как должен выглядеть

Что у меня есть

HTML-код для этого раздела

CSS для этого раздела

 .вершина {
  фон: # 1b1b1e;
  ширина: 1650 пикселей;
  маржа: авто;
}

li a {
  display: inline - блок;
  заполнение: 1em;
  цвет: # 9c9c9c;
  текстовое оформление: нет;
  выравнивание текста: слева;
  размер шрифта: 25 пикселей;
  межбуквенный интервал: 1,1 пикселя;
  font-weight: жирный;
  поле справа: 10em;
}

Саной Лоуренс

1,12544 золотых знака2424 серебряных знака5656 бронзовых знаков

Создан 07 янв.

2

 .вершина {
                фон: # 1b1b1e;
                ширина: 100%;
                маржа: авто;
                плыть налево;
                отступ: 10 пикселей 0;
            }

            .top ul {
                маржа: 0px;
                отступ: 0 пикселей;
            }

            .top li {
                тип-стиль-список: нет;
                плыть налево;
                ширина: 230 пикселей;
            }

            li a {
                display: inline - блок;
                заполнение: 1em;
                цвет: # 9c9c9c;
                текстовое оформление: нет;
                выравнивание текста: слева;
                размер шрифта: 25 пикселей;
                межбуквенный интервал: 1.1px;
                font-weight: жирный;
            }

            .statusText {
                float: right! important;
            }

            .actionText {
                float: right! important;
                максимальная ширина: 149 пикселей;

            }

Создан 07 янв.

Пожалуйста, примените это:

 .вершина {
  фон: # 1b1b1e;
  дисплей: гибкий;
  align-items: center;
  justify-content: пробел между;
}
.link-wrap {
  ширина: 300 пикселей;
  отступ слева: 20 пикселей;
}
.top ul {
  дисплей: гибкий;
  ширина: 400 пикселей;
  justify-content: пробел между;
  тип-стиль-список: нет;
}
.top ul li {
  отступ справа: 25 пикселей;
}
.top ul li a,
.link-wrap a {
  display: inline - блок;
  цвет: # 9c9c9c;
  текстовое оформление: нет;
  размер шрифта: 25 пикселей;
  межбуквенный интервал: 1.1px;
  font-weight: жирный;
}
.link-wrap a {
  ширина: 300 пикселей;
}

Если что-то изменится, дайте мне знать.

Создан 07 янв.

Ревти Шах

63355 серебряных знаков1616 бронзовых знаков

Если вы готовы использовать flex, несколько строк кода исправят вашу проблему.

дисплей: гибкий; 

  .top {
  фон: # 1b1b1e;
  / * ширина: 1650 пикселей; * /
  ширина: 100%;
  маржа: авто;
}

ul {
    дисплей: гибкий;
}

li {
    стиль списка: нет;
}

.statusText {
    маржа слева: авто;
}

li a {
  display: inline - блок;
  заполнение: 1em;
  цвет: # 9c9c9c;
  текстовое оформление: нет;
  выравнивание текста: слева;
  размер шрифта: 25 пикселей;
  межбуквенный интервал: 1.1px;
  font-weight: жирный;
  / * правое поле: 10em; * /
}

Если вы хотите использовать только встроенный блок display, вы можете использовать свойство float.

дисплей: строчно-блочный; 

 .вершина {
  фон: # 1b1b1e;
  / * ширина: 1650 пикселей; * /
  ширина: 100%;
  маржа: авто;
}

li {
    display: inline-block ;;
    стиль списка: нет;
}

li a {
  display: inline - блок;
  заполнение: 1em;
  цвет: # 9c9c9c;
  текстовое оформление: нет;
  выравнивание текста: слева;
  размер шрифта: 25 пикселей;
  межбуквенный интервал: 1,1 пикселя;
  font-weight: жирный;
  / * правое поле: 10em; * /
}

.float-right {
    float: right;
}

Создан 07 янв.

Нитиш

8,1999 золотых знаков1313 серебряных знаков3535 бронзовых знаков

 .вершина {
  фон: # 1b1b1e;
  ширина: 1650 пикселей;
  маржа: авто;
}
ul {
    дисплей: гибкий;
    flex-direction: строка-реверс;
   }

li a {
  display: inline - блок;
  заполнение: 1em;
  цвет: # 9c9c9c;
  текстовое оформление: нет;
  выравнивание текста: слева;
  размер шрифта: 25 пикселей;
  межбуквенный интервал: 1,1 пикселя;
  font-weight: жирный;
  поле справа: 10em;
}

Создан 07 янв.

Гуарав

3311 серебряный знак1010 бронзовых знаков

  


    
    
    
     Документ 

<стиль>
    .вершина {
        фон: # 1b1b1e;
        ширина: 100%;
        маржа: авто;
    }

    li {
        дисплей: встроенный блок;
    }

    li a {
        display: inline - блок;
        / * отступ: 1em; * /
        цвет: # 9c9c9c;
        текстовое оформление: нет;
        выравнивание текста: слева;
        размер шрифта: 25 пикселей;
        межбуквенный интервал: 1.1px;
        font-weight: жирный;
        маржа справа: 1em;
    }

     ul li: not (: first-child) {
        float: right;
    }

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

Создан 07 янв.

Усман Иусман I

1,96844 золотых знака2121 серебряный знак4040 бронзовых знаков

Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками html css или задайте свой вопрос.

lang-html

Stack Overflow лучше всего работает с включенным JavaScript

Ваша конфиденциальность

Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в ​​отношении файлов cookie.

Принимать все файлы cookie

Настроить параметры

html — Как центрировать текст по вертикали с помощью CSS?

Другой способ (здесь еще не упомянут) — использование Flexbox.

Просто добавьте следующий код в элемент контейнера :

  дисплей: гибкий;
justify-content: center; / * выравниваем по горизонтали * /
align-items: center; / * выравниваем по вертикали * /
  
  .box {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
  justify-content: center;
  / * выравниваем по горизонтали * /
  align-items: center;
  / * выравниваем по вертикали * /
}  
  

  Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh

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

Итак, чтобы центрировать гибкий элемент по горизонтали и вертикали, просто установите его с полем : auto 

  .box {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 24 пикселя;
  стиль шрифта: наклонный;
  цвет: #FFF;
  выравнивание текста: центр;
  отступ: 0 20 пикселей;
  маржа: 20 пикселей;
  дисплей: гибкий;
}
.box span {
  маржа: авто;
}  
  

   margin: auto на гибком элементе центрирует его по горизонтали и вертикали

NB: Все вышесказанное относится к центрированию предметов при их раскладке горизонтальными рядами .Это также поведение по умолчанию, потому что по умолчанию значение flex-direction — это строка . Если, однако, гибкие элементы должны быть размещены в вертикальных столбцах , тогда flex-direction: column должен быть установлен в контейнере, чтобы установить главную ось в качестве столбца и дополнительно выравнивать justify-content и . -items свойства теперь работают наоборот вокруг с justify-content: center , центрируя по вертикали и align-items: center центрируя по горизонтали)

 .коробка {
  высота: 150 пикселей;
  ширина: 400 пикселей;
  фон: # 000;
  размер шрифта: 18 пикселей;
  стиль шрифта: наклонный;
  цвет: #FFF;
  дисплей: гибкий;
  flex-direction: столбец;
  justify-content: center;
  / * выравнивает элементы по вертикали * /
  align-items: center;
  / * выравнивает элементы по горизонтали * /
}
п {
  маржа: 5 пикселей;
  }  
  

  

    Когда направление гибкости - столбец ...
  

  

    "justify-content: center" - выравнивает по вертикали.
  

  

    "align-items: center" - выравнивает по горизонтали

Хорошее место для начала работы с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера, — это flexyboxes

.

Кроме того, поддержка браузеров в настоящее время очень хорошая: caniuse

Для кроссбраузерной совместимости для дисплея : flex и align-items , вы можете использовать следующее:

  дисплей: -webkit-box;
дисплей: -webkit-flex;
дисплей: -moz-box;
дисплей: -ms-flexbox;
дисплей: гибкий;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

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

В HTML мы можем выровнять текст двумя способами:

  1. Использование тега HTML (тег
    )
  2. Использование атрибута стиля

Использование тега HTML

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

Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим выровнять текст по центру:



<Голова>
<Название>
Выровняйте текст с помощью тегов HTML


<Тело>
Привет, JavaTpoint!
Здравствуйте, пользователь!
Как дела?

Шаг 2: Теперь переместите курсор в начало того текста, выравнивание которого мы хотим указать как центр.Затем введите в этот момент тег Html.

однострочный текст и инструкции

Шаг 3: Затем мы должны закрыть центральный тег в конце этого текста, который мы хотим поместить в центральную позицию.

Однострочный текст и утверждения

Шаг 4: И, наконец, сохраните файл Html, а затем запустите этот файл.



<Голова>
<Название>
Выровняйте текст с помощью тегов HTML


<Тело>

Здравствуйте, JavaTpoint!

Здравствуйте, пользователь!
Как дела?


Проверить это сейчас

Вывод вышеуказанного кода показан на следующем снимке экрана:

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

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

Шаг 1: Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в котором мы хотим использовать атрибут стиля для выравнивания текста или абзаца.



<Голова>
<Название>
Выровняйте текст или абзац с помощью атрибута стиля


<Тело>
Здравствуйте, пользователь!
JavaTpoint — лучший сайт для обучения.
В HTML мы можем выровнять текст двумя способами:
1. Использование HTML-тега
2. Использование атрибута стиля

Шаг 2: Теперь переместите курсор в начало того текста, выравнивание которого мы хотим указать. Затем введите атрибут стиля CSS в теге

(абзац).

Любой текст или абзац

Шаг 4: И, наконец, сохраните код Html, который изменяет положение текста или абзаца.



<Голова>
<Название>
Выровняйте текст или абзац с помощью атрибута стиля


<Тело>

Здравствуйте, пользователь!

JavaTpoint — лучший сайт для обучения.

В HTML мы можем выровнять текст двумя способами:
1. Использование тега HTML
2. Использование атрибута стиля


Проверить это сейчас

Вывод вышеуказанного Html-кода показан на следующем снимке экрана:

Как центрировать текст в HTML

Обновлено: 12.04.2021, Computer Hope

Для центрирования текста с помощью HTML можно использовать тег

или свойство CSS.Чтобы продолжить, выберите нужный вариант и следуйте инструкциям.

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

Один из способов центрировать текст — заключить его в теги

. В следующем поле приведен пример.

 
 Выровнять текст по центру!

Вставка этого текста в HTML-код даст следующий результат:

Центрировать этот текст!

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

Примечание

Тег

теперь считается устаревшим. Хотя он все еще может работать, ожидается, что он будет удален в пользу использования CSS. Мы рекомендуем вам использовать метод таблицы стилей (показанный ниже) для центрирования текста в HTML.

Использование свойства таблицы стилей

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

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

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

.

 
 Выровнять текст по центру!

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

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

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

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

.

 <стиль>
п {
 выравнивание текста: центр
}

Текст в каждом наборе тегов

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

 <стиль>
.center {
 выравнивание текста: центр
}

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

 
 Выровнять текст по центру!

Подсказка

После создания класса его можно применить к любому тегу HTML. Например, если вы хотите, чтобы заголовок был по центру, вы можете добавить class = «center» к тегу

или другому тегу заголовка.

.

Разное

Previous post
Как выбрать оквэд для ип 2020: Как подобрать коды ОКВЭД 2021 с расшифровкой для ИП
Next post
Морфологические ошибки примеры и исправления: Морфологические нормы и ошибки (примеры нарушений)

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

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