Ruby China

HTML/CSS 用 Bootstrap 的哥们，你们是怎么居中的？

QueXuQ · 2012年12月18日 · 最后由 billyinusa 回复于 2015年02月28日 · 190168 次阅读

基础布局一般用 Bootstrap 都是向下面那样吧。

<div class="container">
  <div class="row">
    <div class="span2">
....

如果我想在一个 span12 里，居中，请问大家是用什么方法的？ 我之前一直用着个不太好的方法，如：

<div class="row">
  <div class="offset5 span7">

但是必须根据文本的长度来不停调节 offset1,offset2....这样。而且好像不是完全居中。 请问有什么更方便的方法吗？ 好像 margin:0 auto;用不了哦。

doitian #1 2012年12月18日

block 没设定宽度是不能 margin auto 来居中的，一个简单的办法是 display: table

PS:

display: table
width: auto
margin-left: auto
margin-right: auto
panywhang #2 2012年12月18日

<center></center>

1 个赞
QueXuQ #3 2012年12月18日

#2 楼 @panywhang 二楼什么状况？？ #1 楼 @doitian 哦。是在 span12 里面的 div 设置为display: table吗？

QueXuQ #4 2012年12月18日

哥们，本贴出现 bug 了。@Rei @huacnlee

serco #5 2012年12月18日

#4 楼 m@QueXuQ 我来测试下新功能 原来真是 bug。。。

doitian #6 2012年12月18日

#3 楼 @QueXuQ 可以加个 class

.center {
  width: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.text-center {
  text-align: center;
}


<div class="center">
  pla pla pla
</div>
cb_web #8 2013年05月08日

在 span2 加入下面的 css margin : 0 auto. float：none；

9 楼 已删除
gaoyuan121 #10 2014年06月03日

直接 text-align:center 就可以了啊

billyinusa #11 2015年02月28日

可以参考这个网址http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 Approach 1 (offsets):

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

In markup this would look like:

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

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.

1 个赞
需要 登录 后方可回复, 如果你还没有账号请 注册新账号