Как центрировать группу divs внутри div?

Question

Я немного новичок с CSS, и я довольно запутан, пытаясь центрировать группу div внутри div. Что я хочу:

дива 2,3 и 4 должна быть сосредоточена внутри див1.

Мой подход:

.div1 { 
    display: inline-block; 
    margin: 0 auto; 
    text-align: center; 
} 

.restofdivs { 
    width: 470px; 
    margin: 20px; 
    min-height: 1px; 
    float:center 
} 

результат: в 3 дивы (2,3 и 4), один поверх другого ...

Привет,

Answer 1

Может установить ширину на .div1 и удалить встроенный блок из .div1

.div1 { 
    width: 960px; 
    margin: 0 auto; 
    text-align: center; 
} 

.restofdivs { 
    width: 470px; 
    margin: 20px; 
    min-height: 1px; 
} 

Answer 2

Это легко может быть сделано с дисплеем таблицы:

.table-display { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.cell-display { 
 
    display: table-cell; 
 
} 
 
.div1, .div2, .div3, .div4 { 
 
    padding: 40px; 
 
} 
 
.div1 { 
 
    background: #ABC; 
 
} 
 
.div2 { 
 
    background: #DEF; 
 
} 
 
.div3 { 
 
    background: #CAD; 
 
} 
 
.div4 { 
 
    background: #FAD; 
 
}

<div class="div1"> 
 
    <div class="table-display"> 
 
    <div class="cell-display div2"></div> 
 
    <div class="cell-display"> 
 
     <div class="div3"></div> 
 
     <div class="div4"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Самый распространенный способ центрирования элемента блока, если вы знаете, что ширина определить ширину и использовать «запас: 0 авто». Это говорит браузеру, чтобы дать верхнее и нижнее поле 0, и автоматически определять равные поля слева и справа.

Использование поплавки, вы можете создать макет, который описывается следующим образом:

http://jsfiddle.net/ynt4suee/

Markup:

<div> 
<div id="one" class="border clearfix">one 
    <div id="wrapper"> 
     <div id="two" class="border">two</div> 
     <div class="subcontainer"> 
      <div id="three" class="border">three</div> 
      <div id="four" class="border">four</div> 
     </div> 
    </div> 
</div> 

CSS:

div.border{ 
border: 1px solid red; 
} 

div#wrapper{ 
width: 400px; 
margin: 0 auto; 
} 

div#two{ 
width: 250px; 
float: left; 
} 

div.subcontainer{ 
float: right; 
width: 130px; 
} 

.clearfix:after { 
content: " "; /* Older browser do not support empty content */ 
visibility: hidden; 
display: block; 
height: 0; 
clear: both; 
} 

Вот еще один подход, используя встроенный блок элементов для внутренних дивы вместо:

http://jsfiddle.net/xojqq4v5/

Markup:

<div id="one" class="border"> 
div 1 
<div id="wrapper"> 
    <div id="two" class="border">div 2</div> 
    <div id="subcontainer"> 
     <div id="three" class="border">div 3</div> 
     <div id="four" class="border">div 4</div> 
    </div> 
</div> 
</div> 

CSS: div.border { границы: 1px сплошной красный; margin-bottom: 5px; }

div#wrapper{ 
width: 450px; 
margin: 0 auto; 
} 

div#two, div#subcontainer{ 
display: inline-block; 
vertical-align: top; 
} 

div#two{ 
width: 300px; 
} 

div#three, div#four{ 
width: 140px; 
} 

Тем не менее, до тех пор, как вы знаете, общую ширину внутренних дивов, вы можете центрирования обертки с помощью «маржи: 0 авто», которая имеет преимущество не центрирование текста на все дочерние элементах, если только иначе указано.

Разница заключается в том, что для размещения внутренних divs в столбцах div 2 и div контейнера, содержащих divs 3 и 4, определяются как элементы встроенного блока.