Как центрировать горизонтальный список в Div в CSS

Автор: Laura McKinney
Дата создания: 2 Апрель 2021
Дата обновления: 21 Ноябрь 2024
Anonim
Выравнивание блока по центру экрана на CSS по горизонтали и вертикали
Видео: Выравнивание блока по центру экрана на CSS по горизонтали и вертикали

Содержание

При создании веб-страницы может быть полезно использовать CSS для центрирования горизонтального списка, такого как интерактивное меню. Вы можете использовать CSS, который является языком таблиц стилей, рядом с HTML, чтобы контролировать внешний вид вашей страницы. Стили CSS часто отображаются непредсказуемо в разных веб-браузерах, поэтому важно тщательно протестировать свою страницу перед ее публикацией. Неупорядоченный список (ul) является элементом уровня блока, поэтому вы можете использовать свойство width для создания централизованного эффекта.


направления

Вы можете использовать CSS и HTML, чтобы контролировать внешний вид вашей веб-страницы. (Comstock / Stockbyte / Getty Images)

  1. Откройте HTML-файл в текстовом редакторе, например, в блокноте Windows.

  2. Добавьте необходимые стили CSS в горизонтальный список в разделе «» вашего HTML-файла, добавив следующий код:

    type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; margin: 0px auto} .myclass li {display: block; плавать: слева; высота: 50 пикселей; высота строки: 50 пикселей; поле: 5px; ширина: 125 пикселей; рамка: сплошная 1px черная; }

    Ширина списка (ul) представляет собой сумму ширины и полей горизонтальных элементов (li).

  3. Создайте горизонтальный список в разделе «>» HTML-файла, добавив следующий код:

    • первый предмет
    • второй элемент в div

    Тег ul указывает неупорядоченный список. Тег «li» соответствует элементу в списке. Элементы списка используют стили CSS, которые соответствуют определенным выше.


  4. Сохраните файл HTML и загрузите его на свой веб-сервер, чтобы просмотреть горизонтальный по центру список.