Center a column using Twitter Bootstrap-第2页回答

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

This works. A hackish way probably, but it works nicely. It was tested for responsive (Y).

.centered {
    background-color: teal;
    text-align: center;
}

Desktop

Responsive

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

骚的不知所云

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

You can use the very flexible solution flexbox to your Bootstrap.

justify-content: center;

can center your column.

Check out flex.

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

余欢

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

To center more than one column in a Bootstrap row - and the number of cols are odd, simply add this css class to all the columns in that row:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

So in your HTML you have something like:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

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

情到深处是孤独

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

I suggest simply to use the class text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

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

听够珍惜

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

Just set your one column that displays content to col-xs-12 (mobile-first ;-) and configure the container only to control how wide you want your centred content to be, so:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

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

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

For a demo, see http://codepen.io/Kebten/pen/gpRNMe :-)

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

忆尘夕之涩

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

Bootstrap version 3 has a .text-center class.

Just add this class:

text-center

It will simply load this style:

.text-center {
    text-align: center;
}

Example:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

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

Center a column using Twitter Bootstrap

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间