О проблеме управления CSS горизонтальным центрированием DIV

Автор：Eve Cole Время обновления：2009-05-31 01:02:34

Что касается вопроса CSS, контролирующего горизонтальное центрирование DIV, я вижу, что многие новички в замешательстве. Я помню, что впервые прочитал книгу CSS, написанную иностранцем, и в ней говорилось об использовании центрирования.

поле слева: авто;
поле справа: авто;

Фактически это эквивалентно:

маржа: 0 авто;

Итак, вы можете использовать этот метод, но некоторые люди обнаружили, что он не центрируется при использовании IE. Рекомендуется проверить, отсутствует ли у вас декларация DTD.

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

Многие люди совершали подобные ошибки! Можно сказать, что этот метод тоже опробован, но в некоторых случаях он все еще не работает. Итак, есть второй метод.

поле слева: 50%;
слева: -ширина/2;

Ширина здесь — это не ширина в CSS, а ширина вашего DIV. Например, если ширина вашего div составляет 768 пикселей, вам следует установить left:-384px. Очень хорошо, уже есть два метода, которые, можно сказать, решили проблемы, с которыми вы можете столкнуться.

Иногда вы обнаружите, что этих двух недостаточно. Несовместимо с некоторыми браузерами. Итак, я нашел третий метод, который в основном рассматривает IE и основан на первом методе. Это требует настройки тела.

тело {text-align: center;}

Таким образом, он также центрируется в IE, но это создает новую проблему. Вы обнаружите, что весь текст на вашей странице центрирован, что выглядит некрасиво. Это легко решить, просто добавьте text-align: left и другие настройки в определение DIV.

Приведенный выше текст представляет собой всего лишь послеобеденную ссылку и набросок. На это может обратить внимание каждый в реальной работе!