Як відцентрувати текст в HTML

HyperText Markup Language (HTML) є стандартною мовою розмітки для більшості веб-сторінок. Він дозволяє вирівнювати текст, змінювати стиль і розмір шрифту і проводити інші дії. Якщо ви редагуєте веб-сторінку, ви можете спробувати 2 типу редагування тексту: HTML і CSS. З цієї статті ви дізнаєтеся, як відцентрувати текст в HTML і в CSS.

Зміст

кроки
Відео: Курс html і css - Вирівнювання блоку div по центру на css [Урок 15]
Відео: Як вирівняти картинку по центру div за допомогою css?
Відео: Вирівнювання контейнерів - як вирівняти контейнери на веб-сторінці (Основи html і css)
Відео: Вертикальне і горизонтальне вирівнювання на css. Повне керівництво.
Що вам знадобиться

кроки

Метод 1 з 2: Центрування тексту в HTML

Підготовка до редагування веб-сторінки на HTML через навчання основам HTML.

Перегляньте різні теги, які можна використовувати для зміни шрифту або редагування тексту. Наприклад, тег "b" використовується для написання тексту жирним шрифтом, а тег "i" - для написання тексту курсивом. Не вмикайте лапки в написанні тегів!

Зображення з назвою Center Text in HTML Step 1Bullet1

Попрактикуйтесь в правильній розстановці тегів. Більшість тегів для редагування вимагають двох тегів - на початку і в кінці тексту, який ви хочете змінити. Перший тег представляє собою букву або символ в кутових дужках (lt; gt;). Другий тег (кінцевий тег) являє собою похилу риску перед буквою або символом тега. Наприклад, поставте "b" на початку тексту і "/ b" в кінці тексту для його написання жирним шрифтом.

Зображення з назвою Center Text in HTML Step 1Bullet2

Зображення з назвою Center Text in HTML Step 2

Знайдіть текст, який ви хочете відцентрувати.

Зображення з назвою Center Text in HTML Step 3

Відео: Курс HTML і CSS - Вирівнювання блоку div по центру на css [Урок 15]

помістіть тег "center" в кутових дужках перед початком тексту. Не ставте пробілів. Не вмикайте лапки в написанні тегів!

Відео: Як вирівняти картинку по центру div за допомогою CSS?

Зображення з назвою Center Text in HTML Step 4

помістіть тег "/ center" в кутових дужках відразу після тексту. Не ставте пробілів.

Зображення з назвою Center Text in HTML Step 5

Збережіть веб-сторінку. Перегляньте її, щоб переконатися в тому, що текст розташований по центру.

Якщо це не так (текст не в центрі), то ви маєте справу з HTML5, який використовує код CSS замість HTML. У цьому випадку спробуйте наступний спосіб центрування тексту.

Зображення з назвою Center Text in HTML Step 5Bullet1

Метод 2 з 2: Центрування тексту в CSS

Підготовка до редагування веб-сторінки на CSS через навчання основам CSS. Код CSS вставляється в HTML документ, так як вони працюють разом.

Теги "body","h1", "h2" і "h3". Вони використовуються для вказівки основного тексту і заголовків (в залежності від розміру шрифту). "h1" - заголовок першого рівня (найбільший), а "h2" і "h3" - менш значні заголовки.

Зображення з назвою Center Text in HTML Step 6Bullet1

Ви будете розміщувати коди CSS після слів "body" або "h1". Наприклад, після "body" запишіть "text-indent: 50px;", Що задасть параметр відступу тексту в заголовку першого рівня.

Зображення з назвою Center Text in HTML Step 6Bullet2

Зображення з назвою Center Text in HTML Step 7

Знайдіть початок тексту, який ви хочете змінити. Ви будете розміщувати коди CSS в дужках тегів HTML.

Наприклад, якщо ви хочете змінити заголовок першого рівня, знайдіть тег "h1".

Зображення з назвою Center Text in HTML Step 7Bullet1

Відео: Вирівнювання контейнерів - як вирівняти контейнери на веб-сторінці (Основи HTML і CSS)

Зображення з назвою Center Text in HTML Step 8

безпосередньо після "h1" запишіть "text-align: center-".

Зображення з назвою Center Text in HTML Step 9

В кінці тексту заголовка додайте "/ h1". Збережіть веб-сторінку.

Відео: Вертикальне і горизонтальне вирівнювання на CSS. Повне керівництво.

замініть слово "center" на слова "right", "left" або "justify", Щоб протестувати різні способи вирівнювання тексту (по правому краю, по лівому краю і т.п.).