Как центрировать все divs в bootstrap 3

Question

Мне нужно центрировать выровнять каждый divs в Bootstrap3. Сделать отчет о бухгалтерском учете. Существует 3 уровня divs - заголовок, подзаголовок и подробный список. На каждом уровне я использую col-md-*, чтобы ограничить ширину. Я пробовал text-align, но это не поможет.

Вот код:

<div class="container"> 
<div class="header text-info"> 
     <h1>Heading</h1><br /> 
     <h2>Acc. Type</h2><br /> 
     <h3>Month</h3> 
    </div> 
<legend>Income</legend> 
    <div class="acc-content row"> 
     <div class="col-md-12"> 
      <b>col-md-12</b> 
      <span class="pull-right">#@#</span> 
     </div> 
    </div> 
<legend>Expense</legend> 
    <div class="acc-content row"> 
     <div class="col-md-12"> 
      <b>col-md-12</b> 
      <span class="pull-right">#@#</span> 
     </div><!-- /col-md-12 --> 
     <div class="col-md-10"> 
      <b>col-md-10</b> 
      <span class="pull-right">#@#</span> 
     </div><!-- /col-md-10 --> 
     <div class="col-md-8"> 
      <b>col-md-8</b> 
      <span class="pull-right">#@#</span> 
     </div><!-- /col-md-8 --> 
    </div><!-- /acc-content --> 
</div>  

DEMO: http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (пожалуйста, смотрите в рабочем столе).

Я ожидаю, что все дивы до центра выравниваются, как это: (красная граница просто тест)

Пожалуйста посоветовали.

Answer 1

Добавить col-md-offset-*. Например:

<div class="col-md-10 col-md-offset-1"> 

и

<div class="col-md-8 col-md-offset-2"> 

Вы должны также изменить margin: 5px на .acc-content div[class*='col-md-'] к margin-top: 5px; margin-bottom: 5px, потому что он переписывает Bootstrap-х margin-left для col-md-offset-*.

• DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
• DOCS: http://getbootstrap.com/css/#grid-offsetting

Answer 2

с использованием блочно-центр класса обертывание с использованием строки

Answer 3

все Col классы от начальной загрузки имеют поплавкового левую собственность. либо удалить их (не рекомендуется) и добавить margin:auto в divs ... или добавить еще divs:

если у вас есть col-8, добавьте col-2 влево и col-2 вправо (смещения) ... так что вы держать систему сетки на месте

Answer 4

Вы должны добавить это к div с:

.acc-content div[class*='col-md-'] { 
    float: none; 
    margin: 5px auto; 
} 

Сначала один перезаписывает float: left правило, которое в значительной степени противоположно центру совместив его, второй один фактически выравнивает его по центр.

Answer 5

Bootstrap 3 имеет микширование, называемое центральным блоком, которое содержится в utilities.less.

Прежде всего, добавьте класс центральный блок к элементам, которые должны быть центрированы.

Тогда, если при использовании менее, добавьте в CSS:

.center-block { 
.center-block(); 
} 

При использовании обычного CSS, добавьте:

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 6

в этом примере заменить этот

 <div class="col-md-10"> 
     <b>col-md-10</b> 
     <span class="pull-right">#@#</span> 
    </div><!-- /col-md-10 --> 
    <div class="col-md-8"> 
     <b>col-md-8</b> 
     <span class="pull-right">#@#</span> 
    </div><!-- /col-md-8 --> 

с этим

<div class="col-md-10 col-md-offset-1"> 
     <b>col-md-10</b> 
     <span class="pull-right">#@#</span> 
    </div><!-- /col-md-10 --> 
    <div class="col-md-8 col-md-offset-2"> 
     <b>col-md-8</b> 
     <span class="pull-right">#@#</span> 
    </div><!-- /col-md-8 --> 

добавить класс col-md-offset- "количество колод" в кол-во