Как я могу центрировать этот DIV (CSS/HTML)

У меня есть DIV, который я бы хотел отцентрировать. Определенной ширины или длины не существует, поскольку предполагается, что страница универсальна для всех размеров окна (при изменении размера окна страница корректируется). Мне нужно сохранить это, центрируя DIV.

Вот фотографии того, что я имею в виду для наглядности.

http://imgur.com/NZ6OSWn,LPkYzwM

"Контейнер" DIV, который содержит все эти изображения, должен быть центрирован. На рисунке он выровнен по левому краю с пробелом справа.

Просто так проще просматривать, вот код в jsfiddle.

http://jsfiddle.net/fZ4CL/

#container{
    display:box;
    float:left;
    margin-top:40px;
    left:50%;
}
#thumb{
    display:box;
    float:left;
    top:0;
    left:0;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}


<body>
<img src='background/001.JPG' class='background'/>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
    <div id='thumb'><img src='thumbs/thumb.jpg'/></div>
</div>

</body>
Источник

4 ответа

Решение

Прежде всего, вы не можете иметь несколько элементов с одинаковым идентификатором. У вас есть несколько элементов с идентификатором thumb, Вы не можете сделать это. Используйте классы вместо.

Затем установите display из миниатюр к inline-block а также text-align из контейнера в center:

#container {
    text-align: center;
}
.thumb {
    display: inline-block;
}

Несколько других вещей не так в вашем коде:

  • display: box очень маловероятно, что вы хотите. Вы, вероятно, хотите block вместо.
  • left а также top не имеют никакого эффекта, если только position установлено.
  • У вас, кажется, есть странное влечение к float: left где это не нужно.
  • Мне нужно было изменить margin к padding чтобы сохранить то же расстояние.

Посмотри на результат.

Источник

Поле: 0 авто; в #container, перед полем маржи:

также зачем использовать float: left в контейнере?

Источник

Вы не можете центрировать элемент блока, если вы не зададите ему определенную ширину. В противном случае браузер предоставит этому элементу столько ширины, сколько имеется в наличии, что означает, что он уже центрирован (с нулевым пространством слева и нулевым пространством справа).

использование min-width и / или max-width чтобы придать элементу определенную ширину, которая является более гибкой, чем единичная width значение, а затем дать элементу margin: 1em auto стиль для центрирования его по горизонтали в пределах неиспользуемой ширины, доступной в его родительском элементе.

Источник

Это должно сделать свое дело.

#container {
   margin-left: auto;
   margin-right: auto;
}
Источник
Другие вопросы по тегам