Как разместить два слова на одной строке, чтобы одно выравнивалось по левому краю, а второе по правому?
Для решения задачи существует несколько способов, из которых мы рассмотрим два. Первый, в каком-то смысле традиционный, основан на таблицах, а второй использует слои и стили.
Использование таблиц
Пример 1. Выравнивание текста с помощью таблицы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Два разных текста на одной строке Текст слева
В данном примере добавлено выравнивание по верхнему краю ячеек, на тот случай, что текст может занимать несколько строк.
Использование стилей
Чтобы расположить два разных текста на одной строке применяется стилевое свойство float со значением left . Исходно float предназначался для создания обтекания вокруг элемента, но в последствии стал активно использоваться при верстке слоев, в частности при создании колонок. С той же целью воспользуемся им и мы. Для этого создаём два класса leftstr и rightstr , для которых установим ширину 50% и обтекание по левому краю ( float: left ). Выравнивание текста по правому краю для правого слоя задаётся стилевым свойством text-align со значением right (пример 2).
Пример 2. Положение текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Два разных текста на одной строке
В данном примере стилевые классы leftstr и rightstr добавляются к абзацу текста. Свойство float действует не только на текущий элемент, но и близлежащие к нему элементы. Поэтому после создания нужных строк следует отменить действие float с помощью свойства clear .
Как расположить текст на одном уровне с картинкой
Сейчас: Нужно: 
Отслеживать
задан 4 июн 2017 в 15:01
user234223 user234223
736 2 2 золотых знака 10 10 серебряных знаков 21 21 бронзовый знак
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Можно вложить в таблицу:
Для кого это необходимо?
Розничная торговля
Интернет торговля
Кафе и ресторан
Сфера услуг
Отслеживать
ответ дан 4 июн 2017 в 15:53
2,225 1 1 золотой знак 10 10 серебряных знаков 21 21 бронзовый знак
- html
- css
-
Важное на Мете
Похожие
Как расположить два тега
на одном уровне?
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Выравнивание текста (text-align) в HTML
Рассмотрим несколько примеров по выравниванию текста внутри контейнера. Начнём с вываривания по левому краю, которое происходит автоматически.
text-align: left
Рассмотрим HTML код контейнера с текстом:
Тише, мыши, кот на крыше. Контейнер div по умолчанию является блочным элементом, поэтому его ширина составляет 100% от родительского элемента (элемента, в котором он находится). Поэтому в этой статье его удобно применять — текст будет перемещаться по контейнеру в зависимости от значения свойства text-align. Результат будет такой:
Тише, мыши, кот на крыше.Выравнивание по левому краю не всегда делается по умолчанию. К примеру, в некоторых языках написание слов происходит справа налево. Если текст в контейнере написан на таком языке, то по умолчанию выравнивание будет по правому краю.
В примере выше использован CSS код внутри атрибута style тега div. Но можно вынести этот код отдельно:
text-align: right
Теперь посмотрим как принудительно сделать выравнивание по правому краю
Тише, мыши, кот на крыше. Текст будет выравнен по правому краю контейнера:
Тише, мыши, кот на крыше.text-align: center
Существует возможность выравнить текст по центру. Для этого необхоимо использовать значение «center»
Тише, мыши, кот на крыше. Текст будет выравнен по центру контейнера:
Тише, мыши, кот на крыше.text-align: justify
Стоит упомянуть о возможности растянуть текст равномерно на всю ширину контейнера. Сделать это можно с помощью значения «justify». Но чтобы продемонстрировать это, зададим два контейнера с ограниченной шириной (max-width: 250px). В одном контейнере оставим стандартные настройки выравнивания, а во втором пропишем text-align:justify:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха. Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха. В браузере первый контейнер будет содержать текст без растягивания на всю ширину. Во втором контейнере текст будет растянут — пробелы между словами будут иметь разную ширину, чтобы заполнить весь контейнер текстом:
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
В примере выше использовано свойство «max-width«, а не «width«, потому что оно не мешает контейнеру быть уже, чем заданное значение. Это удобно, если пользователь просматривает сайт с мобильного телефона, ширина которого менее зданного значения. Благодаря «max-width» вёрстка сайта не сломается — страница не будет уходить за пределы экрана.
Выравнивание текста в HTML
Выравнивание текста отвечает за его внешний вид, формирование краев абзаца и осуществляется по правому или левому краю, центру или выравнивание по ширине.
Существует три способа выровнять текст с помощью HTML-кода:
- При помощи атрибута тега p;
- Выравнивание по центру при помощи тега center;
- Выравнивание при помощи блоков div.
Выравнивание по краям HTML
По краям текст можно выровнять как при помощи тега p, так и при помощи тега div. Для этого используется атрибут align:
- align=”right” – по правому краю;
- align=”left” – по левому краю;
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс"Здесь первое предложение выравнивается по правому краю при помощи тега p, второе – по левому краю при помощи тега div.
Выравнивание по ширине HTML
По ширине текст также может быть выравнен при помощи тегов p и div:
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс"HTML выравнивание по центру
Выравнивание по центру с помощью HTML, как вы уже догадались, можно осуществить всеми тремя вышеуказанными способами:
Конструктор сайтов "Нубекс"
Конструктор сайтов "Нубекс" Конструктор сайтов "Нубекс" Выравнивание CSS
Конечно, более «красиво» делать выравнивание с помощью CSS. Рассмотрим способ выравнивания текста при помощи CSS:
Выравнивание текста с помощью CSS .right Конструктор сайтов "Нубекс" Здесь происходит выравнивание текста по правому краю при помощи атрибута CSS text-align.