Center a column using Twitter Bootstrap

2018-12-31 03:11发布

站内问答 / HTML/CSS
836 30 6

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

30条回答
看风景的人
2楼-- · 2018-12-31 03:43

Try this code.

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

Here i have used col-lg-1, and the offset should be 10 for properly centered the div on large devices, if you need it to center on mediam to large device then just change the lg to md and so on, let me know if any issue.

查看更多
0人赞 添加讨论(0) 举报
妖精总统
3楼-- · 2018-12-31 03:44 
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <img src="some.jpg">
        </div>
    </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
谁念西风独自凉
4楼-- · 2018-12-31 03:45

To center the col- we need to use the below code. cols are floater elements besides margin auto. We will also set it to float none,

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

To center the above col-lg-1 with class of centered, we will write:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

To center the content inside the div, use text-align:center,

.centered {
    text-align: center;
}

If you want to center it only on the desktop and larger screen, not on mobile, then use the following media query.

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

And to center the div only on mobile version, use the below code.

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}
查看更多
0人赞 添加讨论(0) 举报
美炸的是我
5楼-- · 2018-12-31 03:46

Simply add this to your custom CSS file, editing Bootstrap CSS files directly is not recommended and cancells your ability to use a cdn.

.center-block {
    float: none !important
}

Why?

Bootstrap CSS (Ver 3.7 and lower) uses: margin: 0 auto;, but it gets overridden by the float property of the size container.

PS: After you add this class don't forget to set classes by the right order.

<div class="col-md-6 center-block">Example</div>
查看更多
0人赞 添加讨论(0) 举报
步步皆殇っ
6楼-- · 2018-12-31 03:46

To be more precise Bootstrap's grid system contains 12 columns and to center any content let’s say, for instance, the content takes up one column. One will need to occupy two columns of Bootstrap's grid and place the content on half of the two occupied columns.

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5' is telling the grid system where to start placing the content.

'col-xs-2' is telling the grid system how many of the left over columns should the content occupy.

'centered' will be a defined class that will center the content.

Here is how this example looks like in Bootstrap's grid system.

Columns:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

.......offset....... .data. .......not used........

查看更多
0人赞 添加讨论(0) 举报
残风、尘缘若梦
7楼-- · 2018-12-31 03:48

Now Bootstrap 3.1.1 is working with .center-block, and this helper class works with the column system.

Bootstrap 3 Helper Class Center.

Please check this jsfiddle DEMO:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center

Row column center using col-center-block helper class.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)