如何在Bootstrap 3中将所有div居中

Question

I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.

Here's the code :

<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/ (please view in desktop).

I expect all the divs to center aligned like this : (red border is just a test)

Please be adviced.

Answer 1

Add col-md-offset-* . For example:

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

and

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

You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-* .

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

Answer 2

使用块中心类包装使用行

Answer 3

all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:

if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place

Answer 4

You need to add this to the div s:

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

First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.

Answer 5

Bootstrap 3 has a mixin called center-block found in utilities.less.

First, add class center-block to elements that should be centered.

Then, if using Less, add to CSS:

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

If using plain CSS, add:

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

Answer 6

in this example replace this

     <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 -->

with this

<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 -->

add class col-md-offset-"number of cols" to col- divs