Center a column using Twitter Bootstrap

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3.

Please see the starter fiddle.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

So, I want a div, with a class centered to be centered within the container. I may use a row if there are multiple divs, but for now I just want a div with size of one column centered within the container (12 columns).

I am also not sure the above approach is good enough as the intention is not to offset the div by half. I do not need free spaces outside the div and the contents of the div shrink in proportion. I want to empty space outside the div to be evenly distributed (shrink till the container width == one column).

标签： css twitter-bootstrap twitter-bootstrap-3 centering

30条回答

谁念西风独自凉

2楼-- · 2018-12-31 03:25

Method 1:

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

Method 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap Tips, examples and tools: OnAirCode

0人赞添加讨论(0) 举报

查无此人

3楼-- · 2018-12-31 03:28

The preferred method of centering columns is to use "offsets" (ie: col-md-offset-3)

Bootstrap 3.x centering examples

For centering elements, there is a center-block helper class.

You can also use text-center to center text (and inline elements).

Demo: http://bootply.com/91632

EDIT - As mentioned in the comments, center-block works on column contents and display:block elements, but won't work on the column itself (col-* divs) because Bootstrap uses float.

Update 2018

Now with Bootstrap 4, the centering methods have changed..

text-center is still used for display:inline elements
mx-auto replaces center-block to center display:block elements
offset-* or mx-auto can be used to center grid columns

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.

Demo Bootstrap 4 Horizontal Centering

For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456

0人赞添加讨论(0) 举报

看淡一切

4楼-- · 2018-12-31 03:29

Don't forget to add !important. Then you can be sure that element really will be in the center:

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

0人赞添加讨论(0) 举报

低头抚发

5楼-- · 2018-12-31 03:30

Another approach of offsetting is to have two empty rows, for example:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

0人赞添加讨论(0) 举报

回忆，回不去的记忆

6楼-- · 2018-12-31 03:31

My approach to center columns is to use display: inline-block for columns and text-align: center for the container parent.

You just have to add the CSS class 'centered' to the row.

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

JSfiddle: http://jsfiddle.net/steyffi/ug4fzcjd/

0人赞添加讨论(0) 举报

骚的不知所云

7楼-- · 2018-12-31 03:32

As koala_dev used in his approach 1, I would prefer the offset method instead of center-block or margins which has limited usage, but as he mentioned:

Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.

This can be solved using the following approach for odd columns.

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

0人赞添加讨论(0) 举报

1 2 3 4 5 下一页