Размещение предметов на веб-странице имеет важное значение для ее общего дизайна. Хотя есть другие способы повлиять на макет, например, использовать таблицы (которые мы не рекомендуем), лучше всего использовать CSS.
Ниже мы рассмотрим, как использовать встроенное свойство стиля CSS для выравнивания изображений, таблиц, абзацев и т. Д.
Замечания: Эти же методы можно использовать и для внешних таблиц стилей, но поскольку они применяются к отдельным элементам и, вероятно, должны оставаться такими, лучше всего использовать встроенный стиль, как указано ниже.
Выровнять текстовые абзацы
Тег абзаца - первое место, которое нужно начинать с размещения веб-страницы. Это открытие и закрытие тегов выглядят так:
По умолчанию выравнивание текста в абзаце находится в левой части страницы, но вы также можете выровнять свои абзацы вправо и в центре.
Использование свойства float позволяет выровнять абзацы справа или слева от родительского элемента. Любые другие элементы внутри этого родительского элемента будут обтекать плавающий элемент.
Чтобы получить наилучший эффект с абзацем, лучше всего установить ширину в абзаце, который меньше, чем элемент контейнера (родителя).
Выровнять текст внутри абзацев
Возможно, наиболее интересным выравниванием текста абзаца является «justify», который указывает браузеру отображать текст, выровненный, по существу, как с правой, так и с левой стороны окна.
Чтобы оправдать текст в абзаце, вы должны использовать свойство text-align.
Вы также можете выровнять весь текст внутри абзаца с правой или с левой стороны (по умолчанию), используя свойство text-align.
Свойство text-align будет выравнивать текст внутри элемента. Технически, это не должно выравнивать изображения, которые содержатся внутри абзаца или другого элемента, но большинство браузеров обрабатывают изображения как встроенные для этого свойства.
Выравнивание изображений
Используя свойство float в теге изображения, вы можете определить размещение изображений на странице и как текст будет обтекать их.
Как и в приведенных выше параграфах, свойство стиля float в теге изображения позиционирует ваше изображение на странице и сообщает браузеру, как передавать текст и другие элементы вокруг этого изображения.
Текст, следующий за вышеуказанным тегом изображения, будет перемещаться по изображению вправо, когда изображение отобразится в левой части экрана.
Если я хочу, чтобы текст переставал обтекать изображение, я использую свойство clear:
Выравнивание больше, чем абзацы
Однако, что, если вы хотите выровнять больше, чем просто абзац или изображение? Вы можете просто поместить свойство стиля в каждый абзац, но есть тег, который вы можете использовать, что более эффективно:
Просто объедините текст и изображения (в том числе теги HTML) с тегом и свойством style (float или text-align), и все в этом разделе будет выровнено так, как вам хотелось бы.
Имейте в виду, что выравнивания, добавленные к абзацам или изображениям в пределах подразделения, будут выполнены, переопределяя тег.
