проблема выравнивания HTML-страницы - PullRequest
0 голосов
/ 21 декабря 2009

Я разрабатываю HTML-страницу на платформе Windows. Я нахожу, что когда разрешение (или размер в пикселях) браузера (дисплея) превышает размер страницы, страница будет выровнена по левому краю браузера, и я хочу выровнять страницу по центру (середине) браузер, когда размер страницы меньше, чем браузер.

Любые идеи, как реализовать это и как найти основную причину, почему выровнены по левому краю? HTML-страница большая, и здесь неудобно вставлять HTML-код.

спасибо заранее, George

Ответы [ 4 ]

2 голосов
/ 21 декабря 2009

Прежде всего, вы захотите обернуть содержимое своей страницы в блок (этот блок будет отцентрирован):

<div id="body">
    <!-- your page content here -->
</div>

Тогда вы захотите придать ему стиль. Из-за небольшого несоответствия в том, как Firefox и IE обрабатывают центрирование блока, вам придется сделать 2 вещи, чтобы центрировать этот блок.

1. Установить тело как центрирующее все (для IE):


body {
    text-align: center;
}

2. Установите левые и правые поля вашего внутреннего блока как «авто»; и

3. Так как центрирование текста наследует его дочерние узлы, вы хотите вернуть его к выравниванию по левому краю (если вы do не хотите, чтобы весь ваш текст был центрирован .. бла!):


#body {
    margin: 0px auto;
    text-align: left;
    width: 800px; /* set this width to how wide you want your content to be */
}
1 голос
/ 21 декабря 2009

Любые идеи, как это реализовать и

http://dorward.me.uk/www/centre/

как найти основную причину, почему выровнен по левому краю?

… потому что это по умолчанию.

0 голосов
/ 21 декабря 2009

вам просто нужно добавить text-align: center; к вашему телу, чтобы покрыть устаревшие браузеры и добавить:

text-align: left;
margin: 0 auto;

до вашего первого контейнера div ... он будет центрирован по горизонтали во всех браузерах, независимо от того, сколько лет.

0 голосов
/ 21 декабря 2009
<style>
body
{
    width:800px;
    margin:auto;
}
</style>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...