Выровняйте элемент div по центру страницы - PullRequest
0 голосов
/ 11 декабря 2011

У меня есть этот HTML-код:

<div id="main" style=" margin:0 auto; ">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>

И я хочу, чтобы #main div был выровнен по центру страницы.Как канд я это делаю?Спасибо!

Ответы [ 3 ]

5 голосов
/ 11 декабря 2011

Вы должны установить width для div:

<div id="main" style="margin:0 auto; width:700px;">

Я также настоятельно рекомендую вам не использовать встроенный CSS.Вместо этого добавьте что-то подобное во внешнюю таблицу стилей:

#main {
   margin:0 auto;
   width:700px;
}
#main a {
   display:block;
}
#main > div {
   float:left;
}
2 голосов
/ 11 декабря 2011

Вы упомянули в комментарии к Кристер Андерссон, что вы хотите, чтобы div центрировался независимо от ширины. Но вы должны дать некоторую информацию о ширине. Если вы хотите, чтобы div была гибкой шириной, но центрировалась, вам нужно установить конкретные равные поля:

#main {
    margin: 0 50px; /* or whatever px, em, or % you want */
}

См. http://jsfiddle.net/jBYZq/.

Дело в том, что вы должны либо установить ширину элемента и использовать margin: 0 auto, либо установить поля элемента равными. Но что-то должно быть установлено, чтобы это было в центре.

2 голосов
/ 11 декабря 2011
<body>
<div id="main" style=" margin:0 auto; width: 960px;">
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block;" href="#"><img src="ursus.gif"></a>
    </div>
    <div style="float: left">
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
        <a style="display: block" href="#"><img src="test.gif"></a>
    </div>
</div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...