Как выровнять маркированный список в HTML

Веб-дизайнеры используют маркированные списки не только для добавления маркеров и текста. Тег HTML, используемый для создания маркированных списков, удобен для создания меню или организации изображений для загрузки JavaScript в слайд-шоу. Научившись использовать код каскадных таблиц стилей в сочетании с маркированными списками, называемыми на сленге HTML «неупорядоченными списками», вы откроете для себя несколько интересных возможностей веб-дизайна.

Шаг 1

Откройте файл HTML, содержащий маркированный список, и просмотрите <голова> и теги ближе к началу кода. Добавьте теги, если их еще нет. Если ваш код включает тег где-то после , который содержит ссылку на файл CSS, а затем откройте этот файл. Ваш код CSS помещается между тегами или в новой строке вашего файла CSS.

Шаг 2

Выровняйте текст во всех маркерах, установив «text-align» для тега

. Тег
охватывает
• и
теги, чтобы определить их как часть единого списка. Когда вы выравниваете текст для тега
, выравнивание влияет на текст в каждом маркере, но не выравнивает сам список по левому или правому краю страницы. Вот пример кода CSS для установки «выравнивания текста»:

ул {выравнивание текста:вправо;

Обратите внимание, что маркеры не двигаются вместе с текстом. В этом случае пули остаются слева.

Шаг 3

Выровняйте весь список по левому или правому краю страницы, установив «плавающий» для тега

. Когда для тега
задано значение «плавающий», он перемещает весь маркированный список влево или вправо страницы. Установите поплавок следующим образом:

ул {с плавающей запятой:справа;

Вы можете установить "плавающий" влево или вправо, но не в центр.

Шаг 4

Оберните теги

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

Тег сам по себе ничего не центрирует; вы должны использовать CSS, чтобы центрировать все. Добавьте следующий код между тегами