Center align a column in twitter bootstrap

This question already has an answer here:

Center a column using Twitter Bootstrap 3 28 answers

---

The question is correctly answered here Center a column using Twitter Bootstrap 3

For odd rows: ie, col-md-7 or col-large-9 use this

Add col-centered to the column you want centered.

<div class="col-lg-11 col-centered">    

And add this to your stylesheet:

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

For even rows: ie, col-md-6 or col-large-10 use this

Simply use bootstrap 3's offset col class. ie,

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

---

With bootstrap 3 the best way to go about achieving what you want is ...with offsetting columns . Please see these examples for more detail:
http://getbootstrap.com/css/#grid-offsetting

In short, and without seeing your divs here's an example what might help, without using any custom classes. Just note how the " col-6 " is used and how half of that is 3 ...so the " offset-3 " is used. Splitting equally will allow the centered spacing you're going for:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

---

If you cannot put 1 column, you can simply put 2 column in the middle... (I am just combining answers) For Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

Even, you can text centered column by adding this to style:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

Additionally, there is another solution here

链接地址: http://www.djcxy.com/p/75890.html

上一篇: Bootstrap 4行不与中间对齐

下一篇: 中心在twitter引导中对齐列