Как получить главный контейнер div для выравнивания по центру

HI all,

Мне всегда интересно, как другие люди получают возможность выровнять по центру главный контейнер div, поскольку я единственный способ, которым я управляю до сих пор, - добавить в файл css следующее:

* { обивка: авто; Маржа: авто; выравнивания текста: центр; }

Я видел другие страницы, используя: * {Обивка: 0px; поле: 0px} но я не вижу, где и что они делают, чтобы централизовать основной контейнер.

Может кто-нибудь объяснить, как?

Пример кода:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>

Может кто-нибудь объяснить, как они это делают на следующей странице? http://www.csszengarden.com/?cssfile=/179/179.css&page=4

Спасибо

ОТВЕТЫ

Ответ 1

Не используйте селектор *, который будет применяться ко всем элементам на странице. Предположим, что у вас есть такая структура:

...
<body>
    <div id="content">
        <b>This is the main container.</b>
    </div>
</body>
</html>

Затем вы можете центрировать div #content, используя:

#content {
    width: 400px;
    margin: 0 auto;
    background-color: #66ffff;
}

Не знаю, что вы видели в другом месте, но это путь. Фрагмент * { margin: 0; padding: 0; }, который вы видели, предназначен для сброса определений по умолчанию браузера для всех браузеров, чтобы ваш сайт вел себя одинаково во всех браузерах, это не имеет никакого отношения к центрированию основного контейнера.

Большинство браузеров применяют по умолчанию маржу и дополнение к некоторым элементам, которые обычно не согласуются с реализациями других браузеров. Вот почему часто считают умным использовать этот тип "перезагрузки". Представленный вами фрагмент reset является самым простым из стилей стилей reset, вы можете прочитать здесь более подробно:

Ответ 2

Вы можете выравнивать текст: центрировать тело, чтобы центрировать контейнер. Затем text-align: оставите контейнер, чтобы получить весь текст и т.д., Чтобы выровнять по левому краю.

Ответ 3

Основным принципом центрирования страницы является наличие CSS и main_container CSS. Он должен выглядеть примерно так:

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}

Ответ 4

Я бы опустил объявление * { text-align:center }, поскольку он устанавливает выравнивание центра для всех элементов.

Обычно с контейнером с фиксированной шириной margin: 0 auto должно быть достаточно