Bootstrap：如何在液体容器内部正确居中放置6列DIV

Question

I am curious to know what is the proper way of centring a DIV (col-lg-6) inside of a fluid container (12 columns) using Bootstrap?

Here is a screenshot of my design mockup, which explains what I am trying to achieve: http://d.pr/i/1iBrP .

So far I've read on Bootstraps website that this sort of thing can be achieved by adding an offset class eg:

<div class="container-fluid">
    <div class="row">
      <h1 class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3">Auto cargo</h1>
    </div>
</div>

Is it a correct way of doing it or is there a better (or preferable) way of achieving this task?

Also, what if the width of the DIV would be 7 columns, meaning that the number of columns on the side of the DIV would be different because 12 - 7 = 5 columns and 5 is not an even number?

Thank you very much in advance.

Answer 1

[Edited answer]

You can use the helper class center-block in a div which can be a row .

Here is the document about this helper class: Center content blocks

 .container-fluid { border: 1px solid red; } .col-xs-7 { border: 1px solid blue; } .text-center > .single { display: inline-block; float: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-xs-7 col-xs-offset-2"> I'm not centered </div> </div> <div class="row"> <div class="col-xs-7 col-xs-offset-3"> I'm not centered </div> </div> <div class="row center-block"> <div class="col-xs-7 col-xs-offset-3"> I'm not really centered </div> </div> <div class="row text-center"> <div class="col-xs-7 single"> I'm really centered </div> </div> </div> 

EDIT:

I updated the snippet because center-block doesn't work in the example I gave.

So you can use text-center on the row and a custom class called single which uses display: inline-block and float: none .

Answer 2

1. If you have 7 columns you can't center it with pure Bootstrap, you can do it like this:

.col-center {
  float: none;
  margin: 0 auto;
}

<div class="col-md-7 col-center">

2. Your code is correct, but you don't need to set col-xs-12 class (it will automaticaly set 12 columns on mobile without that class - div width = 100% .
3. You set col-md-6 and col-md-offset-3 for medium screen sizes, it means that it will be the same on large( lg ) screens, if you want to reset it on large screen you have to do it like this (change column size and reset offset):

<h1 class="col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3 col-lg-12 col-lg-offset-0">Auto cargo</h1>

4. You shouldn't set this class on h1 element, this is better way:

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-6 col-sm-offset-1 col-md-offset-3"> 
      <h1>Auto cargo</h1>
    </div>
  </div>
</div>

Answer 3

You don't need to do those complex code, just use below code, this will work in all screen.

  <div class="container-fluid"> <div class="col-sm-6 col-sm-offset-3 text-center"> <h2>Lorem ipsum dolor sit amet</h2> </div> </div>