Центр плавающих предметов

Question

у меня есть:

#content {
  width: 100%;
  text-align: center;
}

.item {
  float: left;
}

<div id="content">
  <div class="item"><img /><br />wordsn</div>
  <div class="item"><img /><br />stuff</div>
  <div class="item"><img /><br />asdasdasdn</div>
  <div class="item"><img /><br />Dhdfrhwon</div>
  <div class="item"><img /><br />sewfafdion</div>
</div>

Я хочу расположить эти изображения по центру в элементе div, чтобы они плавали рядом друг с другом, и чтобы они были хорошо обернуты.

Я перепробовал все, и он работает в IE и ломается в Firefox, так что я взломал еще немного дерьма, а затем он ломается в IE.

Answer 1

Избавьтесь от float и начните использовать display: inline для item делений.

Тогда вы можете дать content a text-align: center - должно работать.

Кстати, семантически такая структура может работать лучше - в зависимости от того, что эти элементы представляют, конечно.

<ul id="content">
    <li><img />wordsn</li>
    <li><img />stuff</li>
    <li><img />asdasdasdn</li>
    <li><img />Dhdfrhwon</li>
    <li><img />sewfafdion</li>
</ul>

Answer 2

.item { width: 400px; margin: auto 0; }

Необходимо указать ширину, чтобы можно было рассчитать соответствующие поля.

Answer 3

Хорошо, это то, что мне нужно для работы во всех браузерах:

#content {
text-align:center;
}

.item {
     display: -moz-inline-box;
    display:inline-block;
}

* html .item { display:inline; }  /* for IE 6? */
* + html .item { display:inline; }  /* for IE 7? */

редактировать: ширина не требуется

Answer 4

#content .item{width:200px;margin:0 auto}

Answer 5

Это то, чего вы пытаетесь достичь? (вам нужно изменить размер страницы, чтобы увидеть эффект переноса)

djgdesign.co.uk