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