Как центрировать выравнивание div Без заданной ширины

Question

Я создаю макет страницы стиля масонства, и я пытаюсь найти способ центрирования плит, когда страница не в полном размере. То, что у меня есть на данный момент, как:

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width 

| [ TILE ] [ TILE ] [ TILE ]   | //Lower Screen Resolution 
| [ TILE ]       | 

Что я хочу это:

| [ TILE ] [ TILE ] [ TILE ] [ TILE ] | //Full Width 

|  [ TILE ] [ TILE ] [ TILE ]  | //Lower Screen Resolution 
|  [ TILE ]      | 

Я попытался использовать встроенный блок, как предложено в предыдущих постах, но это здесь не работает , возможно, из-за плавания «Плитки». Есть ли решение?

Спасибо

Answer 1

Вот ответ с помощью запросов медиа CSS3. Просто отрегулируйте ширину содержащего элемента до количества элементов, которые она может удерживать. Мой пример слишком упрощен, но дает результаты, которые вы ищете.

В моем примере элементы составляют 200 пикселей каждый. Если экран шириной 1000 пикселей, он может содержать 5 элементов. Как только он имеет ширину 959 пикселей, он больше не может содержать 5 элементов. Таким образом, мы настраиваем его ширину на 4 элемента - 800 пикселей. Вы можете продолжать уменьшаться или увеличиваться по мере необходимости.

Вот мой jsFiddle: http://jsfiddle.net/NzTPr/

HTML

<div class="container"> 
    <div class="block"> 
      content 
    </div> 
    <div class="block"> 
      content 
    </div> 
    <div class="block"> 
      content 
    </div> 
    <div class="block"> 
      content 
    </div> 
    <div class="block"> 
      content 
    </div> 
</div> 

CSS

.container { 
    width: 1000px; 
    margin: 0 auto; 
} 
.block { 
    width: 190px; 
    margin: 5px; 
    background-color: green; 
    float: left; 
    color: white; 
} 

    @media screen and (max-width: 959px) { 
      .container { 
       width: 800px; 
      } 
    } 
    @media screen and (max-width: 759px) { 
      .container { 
       width: 600px; 
      } 
    } 
    @media screen and (max-width: 559px) { 
      .container { 
       width: 400px; 
      } 
    } 

Answer 2

inline-block Для использования с text-align: center на родительский элемент, вам нужно удалить float свойство.

Вы обнаружили, что inline-block делает то, что вы используете float, так как вы не пропустите поплавок.

Вот очень простой пример: http://jsfiddle.net/ppsHy/