Центрирование документа с макетом фиксированной ширины с использованием CSS

Компоновки с фиксированной шириной может быть сложно центрировать в некоторых популярных браузерах, но это возможно, всего лишь с несколькими строками кода.

Вот как

  1. Создайте новую веб-страницу с таблицей стилей CSS в своем редакторе HTML.
  2. Создайте элемент div в качестве основного элемента на странице, где вы будете хранить все на странице.
  3. Присвойте этому элементу div уникальный идентификатор на странице.
  4. Откройте таблицу стилей CSS и установите ширину вашего элемента div:
     div # main {width: 750px; } 
  5. Добавьте автоматические поля для центрирования вашего div:

     div # main {width: 750px; поле слева: авто; margin-right: auto} 
  6. Чтобы исправить это для Netscape 4 и IE 4-6 (режим причуд), добавьте выравнивание текста по телу:

     body {text-align: center; } 
  7. Но тогда весь текст внутри центрируется, поэтому выровняйте текст в вашем #main div, добавив text-align: left; там:

     div # main {width: 750px; поле слева: авто; поле справа: авто; выравнивание текста: слева; } 
  8. Сохраните свою страницу и свою таблицу стилей.
  9. Проверьте свою работу в нескольких веб-браузерах.

Это будет центрировать поле макета, но не содержимое внутри него. Используйте выравнивание текста, чтобы центрировать внутренний контент.

Оцените статью
Solutics.ru
Добавить комментарий