Как я могу центрировать неизвестное количество элементов блока неизвестной ширины в контейнере блока неизвестной ширины?

Question

Это мой первый пост, извините, если мое форматирование воняет.

Я пытаюсь отформатировать списки категорий товаров. Категории сгруппированы по классификации. Я могу получить div .preview_box, чтобы выровнять, как я хочу, и я могу получить содержимое div .preview_box, чтобы выровнять, как я хочу. То, что я не могу понять, как это сделать, так это, чтобы div .classification казался встроенным и центрированным. Теперь я их вставляю в линию, надевая на них левый плавающий элемент, что сводит на нет способность центрировать их.

Как я могу центрировать содержимое блока с неизвестной шириной в неизвестном div ширины, когда ширина контейнера моего общего макета страницы также неизвестна (80%, min-800px, max-1200px)?

Вот идея моего html & css:

<div class="previews">
  <% @classifications.each do |classification| %>
    <div class="classification">
      <h3>
        <%= classification.title %>
      </h3>
      <% classification.subcategories.each do |subcategory| %>
        <div class="preview_box">
          <div class="subcategory_preview_image">
            <% if subcategory.image? %>
              <%= link_to image_tag(subcategory.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% elsif subcategory.products.present? and subcategory.products.first.product_images.present? %>
              <%= link_to image_tag(subcategory.products.first.product_images.first.image.url(:thumbnail)), abbr_subcategory(subcategory) %>
            <% else %>
              <%= link_to image_tag('subcategories/missing.png'), abbr_subcategory(subcategory) %>
            <% end %>
          </div>
          <div class="subcategory_preview_text">
            <%= link_to subcategory.title, abbr_subcategory(subcategory) %>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>
</div>

.previews {
}
.classification {
  margin: 3px;
  padding: 3px;
  float: left;
  text-align: center;
}
.previews .preview_box {
  position: relative;
  width: 120px;
  height: 150px;
  float: left;
  margin: 10px;
}
.previews .preview_box .subcategory_preview_image {
  position: absolute;
  bottom: 40px;
  width: 120px;
}
.previews .preview_box .subcategory_preview_image img {
  display: block;
  margin: 0 auto;
}
.previews .preview_box .subcategory_preview_text {
  position: absolute;
  top: 110px;
  width: 120px;
  text-align: center;
}

Вот идея того, как это выглядит в настоящее время.

То, что я пытаюсь сделать, это центрировать эти серые поля в контейнере, не располагая каждый серый блок на отдельной строке, не зная ни ширины серых полей, ни ширины белого контейнера.

Answer 1

Я не уверен, правильно ли я вас понимаю, но это может сработать для вас. Вам нужно адаптировать его к вашим потребностям, но оно должно работать

http://jsfiddle.net/wxarF/

Обновление: http://jsfiddle.net/wxarF/1/

CSS:

.previews {
    width: 600px;
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
}

.classification div {
    display: inline-block;
    background: #eee;
    padding:3px;
    margin:0 5px 5px 0;
    border: 1px solid #ccc;
}

.preview_box {
    display: inline-block;
    background: #ccc;
    margin-right: 3px
 }