Использование 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 (режим quirks), добавьте выравнивание текста на теле:
    body {text-align: center; }
  7. Но тогда весь текст внутри центрируется, поэтому выровняйте текст в вашем #main div, добавив text-align: left; там:
    div # main {width: 750px; поле слева: авто; поле справа: авто; выравнивание текста: слева; }
  8. Сохраните свою страницу и свою таблицу стилей.
  9. Проверьте свою работу в нескольких веб-браузерах.

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

Ссылка на основную публикацию