Как центрировать div внутри div в следующем случае

Question

У меня проблема с настройкой моего макета вправо, elemnts не выравнивает способ, которым я хочу, и у меня заканчиваются идеи или повторяются те же ошибки.

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

HTML

<div id="tiles_wrap"> 
    <div id="tiles"> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaab</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaav</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">aaaa</div> 
      </div> 
     </div> 
     <div class="tilewrap"> 
      <div class="tilebg"> 
       <div class="ribbon">bbbv</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#tiles_wrap { 
    width: 100%; 
    display:block; 
    position: relative; 
    background-color: rgba(0, 255, 0, 0.3); 
    float: left; 
    padding-left:25%; 
    padding-right:25%; 
} 
#tiles { 
    margin: 0 auto; 
    height: 100%; 
    display:block; 
    float: center; 
    Padding: 40px; 
    line-height: 0.7em; 
    font-size: 12px; 
    background-color: rgba(0, 0, 255, 0.3); 
} 
.tilewrap { 
    padding: 5px; 
    float: left; 
} 
.tilebg { 
    height: 55px; 
    width: 70px; 
    background-color: brown; 
    display:block; 
    position: relative; 
    float:left; 
} 
.ribbon { 
    color: #fff; 
    padding:2px; 
    background-color: rgba(255, 0, 0, 0.5); 
    display:block; 
    position: absolute; 
    z-ndex: 22; 
} 

Спасибо заранее за помощь!

Answer 1

Вы не можете использовать float для этого, нет float: center;, так что это одна из ваших проблем. Кроме того, абсолютно позиционирующие элементы стремятся зафиксировать их в определенном месте, поэтому они не очень хороши для центрирования и переустановки в зависимости от ширины контейнера.

Вы можете, однако, использовать display: inline-block; вместе с text-align: center;, чтобы сделать то, что вам нужно.

Кроме того, не забывайте, что если вы установите ширину объекта 100%, затем добавить 25% отступы на левой и правой сторон, вы делаете полную ширину этого объекта 150% его родителя (в нормальном content-box модель.)

http://jsfiddle.net/UQ34L/1/

Answer 2

Чтобы получить синий до центра, вам необходимо установить ширину для #tiles, а затем удалить прокладку из #tiles_wrap. Нет такой вещи, как float: center, поэтому это игнорируется.

Answer 3

Попробуйте

#tiles_wrap { 
      width: 100%; 
      display: block; 
      background-color: rgba(0, 255, 0, 0.3); 
      float: left; 
} 

#tiles { 
     width: 65%; 
     margin: 0 auto; 
     Padding: 40px; 
     font-size: 12px; 
     background-color: rgba(0, 0, 255, 0.3);} 

Answer 4

Попробуйте JSFiddle

Как было предложено другими, я добавил дисплей: встроенный блок, чтобы заставить divs сидеть рядом друг с другом. Кроме того, я добавил обертку div с id = "wrapper" и применил центр text-align: center, чтобы выравнивать плитки в центре.

Также я добавил div с id = "tiles_left" для левого поля div с шириной 30% и удалил div "tiles_wrap", поскольку он не нужен с изменениями, которые я сделал. «Плитка» с шириной 70%

<div id="tiles_left"> 
    hello 
</div> 
<div id="tiles"> 
<div id="wrapper"> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaab</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaav</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">aaaa</div> 
    </div> 
</div> 
<div class="tilewrap"> 
    <div class="tilebg"> 
     <div class="ribbon">bbbv</div> 
    </div> 
</div> 
</div>