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

Как отцентрировать текст по вертикали?

Получается так, что текст наверху рамки, а остальная часть рамки пусто. Как отцентрировать текст по вертикали (не меняя код выше)?

Отслеживать
задан 20 апр 2016 в 16:31
1,271 5 5 золотых знаков 21 21 серебряный знак 37 37 бронзовых знаков
Дабавьте line-height: 50px
20 апр 2016 в 16:38
я боюсь спросить: что значит не меняя код выше?
20 апр 2016 в 16:42
т.е. ничего не удалять, а продолжить, добавить код
20 апр 2016 в 16:46

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Используйте display: table-cell (разрешить центрирование) в связке с vertical-align: middle (выполнить центрирование):

      
Шаблон
  

Отслеживать
ответ дан 20 апр 2016 в 16:42
Arhadthedev Arhadthedev
11.5k 8 8 золотых знаков 42 42 серебряных знака 69 69 бронзовых знаков

Добавьте line-height: 50px; — тогда высота строки станет равной высоте вашего блока ( height: 50px; ) и текст отцентрируется:

Шаблон

Отслеживать
ответ дан 20 апр 2016 в 16:57
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак

• html
• css
• html5
• css3

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

Как в html сделать текст справа – Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому?

Чем отличается написание текста в обычном текстовом редакторе, от написания в HTML? В текстовом редакторе, форматирование текста происходит в интерфейсе программы. Для HTML страницы – текст форматируется, при помощи тегов.

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

Хорошего Вам дня!

Текст, всегда заключают, между тегами, например, внутри абзаца.

Пожелайте мне удачи!

Мы собрали список, наиболее частых запросов, связанных с текстом, от начинающих изучать HTML.

Как сделать текст в центре

По умолчанию, текст, прилипает к левому краю. Свойство text-align, внутри тега div, выравнивает текст по центру.

// HTML

div text-align: center; // CSS
>

Как сделать текст справа

// HTML

div text-align: right; // CSS
>

Как сделать отступ текста

За отступы текста отвечают свойства – margin и padding. Margin отделяет абзацы друг от друга, а padding создает воздушное пространство, внутри абзаца. Отступы измеряют в абсолютных единицах измерения — пикселях или в относительных — %, em, rem.

Отодвинься от меня

// HTML
p <
margin: 20px; // CSS
padding: 10px;
>

Как сделать текст жирным

Через тег b, можно вставлять прямо в разметку. Этот способ предпочтительнее для SEO-оптимизации.

Хочу быть жирным

// HTML

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

Хочу быть самым жирным

// HTML

span font-weight: bolder; // CSS
>

или указывать жирность в цифрах.

span font-weight: 700; // в интервале 100 — 900
>

Как сделать ссылку в тексте

Нужный фрагмент текста, заключить в тег a, с указанием URL-адреса.

Вам следует перейти по этой ссылке

// внешняя ссылка

У меня тут есть хорошая статья

// внутренняя ссылка

Как сделать текст в рамке

Рамка задается не тексту, а блочному тегу, в котором находится этот текст.

Я — важный текст

// HTML

p border: 2px solid pink; // толщина, сплошная, цвет
padding: 15px; // воздух между рамкой и текстом
>

Как сделать текст подчеркнутым

Нужное место, обрамляем тегом u.

Прошу здесь подчеркнуть меня

// HTML

Как задать тексту фон

Сделать фон для всего абзаца.

Хочу выделиться фоном

// HTML

p background-color: pink; // CSS
>

Если вы хотите задать фон, отдельному фрагменту текста, тогда используйте span.

Нет, только розовый цвет

// HTML

span background-color: pink; // CSS
>

Как увеличить текст

Посмотрите, какой я большой

// HTML

p font-size: 30px; // CSS
>

Как сделать текст курсивом

Через тег i в разметке.

Здесь я прямой, а тут — курсивом

// HTML

CSS стили + тег

Курсивом — я особенный

// HTML

span font-style: italic; // CSS
>

Итого

Мы взяли список топовых запросов, связанных с форматированием текста в HTML, от начинающих и коротко ответили на них. Задавайте ваши вопросы в комментариях.

Создано 29.07.2019 10:29:18

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Выравнивание текста по центру, ширине и по краям

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

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

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

Попробовать »

Примечание: свойство text-align работает только с блочными элементами, такими как абзац или div, выравнивая внутри них все строчное содержимое, включая изображения. Применение свойства к строчным элементам, таким как ссылка или span, не даст никакого эффекта.

С этой темой смотрят:

text-align | htmlbook.ru

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

Версии CSS

Описание

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

Синтаксис

text-align: center | justify | left | right | inherit

text-align: center | justify | left | right | start | end

Значения

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

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

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

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

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

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

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

Браузеры

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

Изображения в тексте | htmlbook.ru

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег помещается в контейнер

, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P, а способ выравнивания определяется свойством text-align. Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега

      
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

Для обтекания картинки текстом также можно применить стилевое свойство float. Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left, наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

       
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

В данном примере к тегу добавляется класс fig, для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom.

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin.

Применение таблиц

Пример 4. Создание рисунка на поле с помощью таблиц

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

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

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

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

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic, а текст, сильно не мудрствуя, в слой text. Теперь для слоя piс следует установить свойство float со значением left, а для text — margin-left. Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

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

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right, а свойство margin-left на margin-right.

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

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

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

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

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

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

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

Примечание: Сегодня тег признан устаревшим. И хотя он все еще работает, ожидается, что он будет удален. Для центрирования текста мы рекомендуем использовать CSS.

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

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

:

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

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

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

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

 .center

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

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

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

Данная публикация представляет собой перевод статьи «HOW TO CENTER TEXT IN HTML» , подготовленной дружной командой проекта Интернет-технологии.ру

Как в html сделать отступ текста?

Здравствуйте, дорогие друзья!

Рассмотрим несколько способов как сделать отступ текста в HTML.

Навигация по статье:

Отступ текста в HTML при помощи margin

Когда вы размещаете текст на сайте он находится в каком-то теге. Это может быть тег блока , тег таблицы , абзаца , секции и так далее.

Мы можем задать отступ для тега в котором находится текст при помощи CSS свойства margin.

Делается это так:

Здесь мы воспользовались атрибутом style и в нём указали нужное CSS свойство, задав тексту отступ слева 20px. Так же мы можем задать для нашего блока или другого тега класс и потом в отдельном CSS файле дописать для него стили.

При помощи этого свойства мы можем задать разные отступы тексту в HTML:

• margin-left — расстояние слева
• margin-right — расстояние справа
• margin-top — расстояние сверху
• margin-bottom — расстояние снизу

Так же можно одновременно в одной строке задать одинаковые или разные отступы со всех сторон:

• margin: 10px; — делаем отступ текста 10px со всех сторон
• margin: 15px 30px; — задаём отступ срерху и снизу по 15px, а справа и слева по 30px
• margin: 15px 25px 35px 45px; — отступ сверху 15px, слева – 25px, снизу – 30px, справа – 45px

Вместо пикселей вы так же можете задавать %, em, rem и другие единицы.

Отступ текста в HTML при помощи padding

Этот способ очень похож на предыдущий, но если margin задавал отступ до текста как бы снаружи тега, то padding будет задавать отступ внутри.

Так же можно присвоить класс в HTML коде или воспользоваться уже существующим и дописать это свойство ему:

padding: 20px 10px 15px 20px;

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

• padding-left — слева
• padding-right — справа
• padding-top — сверху
• padding-bottom — расстояние снизу
• padding: 25px; — отступ со всех сторон.

Отступ текста html при помощи неразрывного пробела

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

• Если вы поставите этот тег в тексте между слов или вначале строки то он создаст отступ равный по ширине 1 пробелу. Поставив несколько вы можете увеличить расстояние между словами.
• Если поставить между строк то он создаст вертикальный отступ равный по высоте одной строке. Дописав несколько (каждый с новой строки) можно увеличить это расстояние.

Отступ текста в HTML при помощи text-indent

Если вам нужно задать отступ в HTML не для всего текста на странице, а лишь только для первой строчки одного или нескольких абзацев, то это можно сделать при помощи свойства text-indent

Что делать если отступ не появляются?

Бывают ситуации, когда вы задаёте отступ текста HTML одним из предложенных способов, а он не применяется.
Причин здесь может быть несколько. Наиболее распространённые описаны в этой статье: «Почему не работают CSS-стили?»

Если вы знаете ещё какие то способы как сделать отступ текста HTML напишите их в комментариях. Если статья была для вас полезной — делитесь ей в социальных сетях. Так вы помогаете мне развивать сайт.

Успехов вам в оформлении ваших сайтов и не только!

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

Как разместить изображение на веб-странице слева от текста

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

Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега

). Вот как выглядит HTML-разметка:

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

По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:

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

Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.

.left

Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.

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

Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса «main-content«:

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

Задать стили для изображения можно с помощью следующего кода CSS:

.main-content img

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

Также можно добавить стили непосредственно в HTML-разметку, например:

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

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Данная публикация представляет собой перевод статьи «How To Float an Image to the Left of Text on a Webpage» , подготовленной дружной командой проекта Интернет-технологии.ру

Как отцентрировать список внутри div’a?

Уже это, если хотите, можете положить в div. И помните, что любой список и не нумерованный тоже имеет отступы слева перед элементами списка. Уберите эти отступы и равняйте по центру любым доступным вам способом

Отслеживать
ответ дан 23 июн 2022 в 10:13
Quazimorda Quazimorda
1,267 6 6 серебряных знаков 13 13 бронзовых знаков

• html
• css

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

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

Text align html center: How to center text in HTML

html — Как изменить ширину текста, но оставить ее посередине

У меня есть текстовый элемент P

В css я использовал text-align: center; центрировать текст по центру экрана который работает.

, но если я хочу, чтобы текст имел больше места с обеих сторон, используя «ширину 80%», он помещает весь текст в левую часть экрана, полностью игнорируя центр выравнивания текста (за исключением текста, который все еще выглядит центрированным, просто не в центр экрана

Кстати, я отказываюсь просто использовать поля, отступы, левые, правые пиксели, потому что это заставляет пиксели я хочу иметь возможность изменять размер окна и сохранять пропорции

Я хочу, чтобы текст был посередине. не приблизительно и не рассчитано вручную..

так просто, я просто хочу текст с некоторым пространством с обеих сторон одинаково.

Вместе с «Ширина: 80%», я попробовал;

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

(не все одновременно очевидно)

ничего не помогло.

содержимое находится посередине, вы что-то не так, попробуйте, как показано ниже,

test
 

Объединение данного комментария и ответа в один ответ:

Это создаст элемент p шириной 80% и отцентрирует его, а также отцентрирует текст внутри.

тест
 

Если вам нужны дополнительные модификации, дайте мне знать в командной строке

body < дисплей: гибкий; выравнивание элементов: по центру; выравнивание содержимого: по центру; flex-направление: столбец; высота: 80вх; ширина: 100%; >п

   
У механических клавиатур хорошие отзывы
  

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

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

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

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

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

Примечание : Центрирование в HTML используется для тега. Однако вместо тега CSS используется для выравнивания текста по центру, поскольку тег не поддерживается в HTML5. Мы советуем вам использовать таблицу стилей для центрирования текста в HTML. Выравнивание текста в HTML5 можно выполнять различными способами.

В этом руководстве мы рассмотрим следующие темы:

Центрировать текст в HTML без использования CSS

С помощью тега HTML Center

В HTML 9Тег 0085 не имеет определенного атрибута. Но он поддерживает все глобальные атрибуты HTML.

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

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

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

Ваш HTML-код должен выглядеть примерно так:

  Добро пожаловать в Computer Notes Отцентрировать текст в html текст по центру html  

Использование метода выравнивания HTML по центру

Опять же, это устарело в HTML 4, а также не будет работать в HTML5.

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

Для центрирования текста в HTML с помощью свойства CSS.

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

Первый метод, который мы рассмотрим, использует встроенный CSS непосредственно в теги HTML. Встроенный CSS означает, что ваш HTML и CSS будут объединены в основной части вашего HTML-кода.

Этого можно добиться с помощью тега стиля в HTML. Код CSS добавляется поверх кода HTML, поскольку оба языка разметки работают вместе.

Это свойство заменяет атрибут HTML align. Вы можете центрировать текст, используя свойство CSS text-align. Выравнивание текста HTML используется для выравнивания текста (например, по левому краю, по правому краю, по центру и т. д.).

Примечание : По умолчанию текст выравнивается по левой стороне веб-страницы.

Синтаксис свойства CSS text-align:

Чтобы применить свойство text-align, необходимо определить одно из шести доступных значений:

выравнивание текста: по левому краю | право | центр | оправдать | начальная | наследовать

Посмотрите пример использования CSS text-align ниже:

Пример:

h2 < выравнивание текста: по центру; >h3 < выравнивание текста: вправо; >h4

Все доступные свойства для использования text-align объясняются в таблице ниже:

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

Пример выравнивания текста HTML по центру:

   h2 р  
 Как центрировать текст в HTML 
 
выровнять HTML по центру
  

Объяснение примера:

Из вышеизложенного мы продемонстрировали пример выравнивания текста HTML по центру.

• Атрибут Center выравнивает текст по центру веб-страницы.

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

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

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

Мы можем использовать стиль как атрибут и текст, который включает в себя строку, которую необходимо выровнять. Имей в виду; мы по-прежнему используем атрибут CSS для выравнивания нашего текста. Пример кода ниже показывает, как «стиль» используется внутри

тег. Чтобы выровнять по левому или правому краю, мы можем заменить «центр» в text-align: center на левый/правый.

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

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