Как получить основной контейнер div для выравнивания по центру? - PullRequest
Новая
       16

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

19 голосов
/ 17 февраля 2010

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

*{
padding:auto;
margin:auto;
text-align:centre;
}

Я видел другие страницы, используя: *{padding:0px;margin: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

Ответы [ 4 ]

39 голосов
/ 17 февраля 2010

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

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

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

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

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

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

3 голосов
/ 06 июня 2011

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

body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#main_container {
     margin: 0 auto;
     text-align: left;
}
3 голосов
/ 02 февраля 2011

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

1 голос
/ 17 февраля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...