logo标签列表

使用Bootstrap 3如何让一行内容居中？

csstwitter-bootstrap
58
如何在Bootstrap 3中将一行（12列）居中显示？ 我不想使用`offset`。 我尝试了这种方法，但没有效果。 

    .col-centered{
        float: none;
        margin: 0 auto;
    }
    <div class="row" style="max-width: 300px;">
        <div class="col-md-12 col-xs-12 col-centered">
            <div class="input-group">
                <div class="input-group-btn">
                    <button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        All Items 
                                    <span class="caret"></span>
                    </button>
                    <ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
                        <li><a href="#"> Test 1 </a></li>
        <li><a href="#"> Test 2 </a></li>
        <li><a href="#"> Test 3 </a></li>
        <li><a href="#"> Test 4 </a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>

有什么解决方案吗？我对这项工作没有任何想法。

14个回答
63

为什么不使用网格系统？

Bootstrap网格系统由12列组成，因此如果您使用“中等”列，它将具有970像素的宽度大小。

然后，您可以将其分为3列（12/3=4），因此使用3个带有“col-md-4”类的div：

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

每个都将有最大宽度为323像素的大小。保留第一个和最后一个为空，并使用中间的内容使其居中:

<div class="col-md-4"></div>
<div class="col-md-4">
   <p>Centered content.</p>
</div>
<div class="col-md-4"></div>
@AmelSalibasic 这个回答是针对问题的，请先阅读问题。 - Waleed Asender
解释条款和条件。 - sensei
58

你所做的方式行不通，因为你将margin: auto应用于全宽列。

将其放入一个div中并居中该div。例如：

<div class="i-am-centered">
  <div class="row">...</div>
</div>

.

.i-am-centered { margin: auto; max-width: 300px;}

http://www.bootply.com/93751

这是一种更干净的解决方案，因为它更加表达性，并且通常您不想混乱网格。

我使用: <div class="im-centered row"> ...</div>。有效。谢谢 @hugo der hungrige - john
4
那么，不猜测行宽度的情况下，这个怎么做呢？ - NetMage
51

我知道这个问题特别针对于Bootstrap 3，但是如果Bootstrap 4的用户遇到了这个问题，这里是如何在v4中居中行的方法：

<div class="container">
  <div class="row justify-content-center">
  ...

更多相关主题可以在Bootstrap的网站上找到。

2
这应该是答案！ - Ali
2
justify-content-center 是我遇到的问题所需的。谢谢！ - jord8on
5
@Ali: 这不应该是答案，因为它在BS3中不起作用。如果你来这里寻求帮助，很可能你没有使用BS4。 - Ed S.
21

不是

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

你可以直接使用

<div class="col-md-4 col-md-offset-4"></div>
只要您不需要第1列和第3列中的任何内容，这就是一种更优雅的解决方案。偏移量在前面“添加”了4列，让您在后面有4个“备用”列。
PS我意识到最初的问题没有指定偏移量，但至少之前的一个答案使用了CSS hack，如果您使用偏移量则此举是不必要的。因此，为了完整起见，我认为这是有效的。
10

您可以在不添加空列的情况下使用网格系统。

<div class="col-xs-2 center-block" style="float:none"> ... </div>

更改 col-xs-2 以适应您的布局。

检查预览：http://jsfiddle.net/rashivkp/h4869dja/

4
在贬低之前请先尝试一下。 - Rashi
1
@smartmouse 把 <div class="col-lg-4" style="float:none;"> 改为 <div class="col-xs-4 center-block" style="float:none;">。只需将居中内容包装到所需宽度即可，不要超过宽度。 col-lg-4 太大了，内容会向左浮动到 div 内部。 - Rashi
7

将以下内容添加到你的CSS文件中：

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


.col-centered {
   display:inline-block;
   float:none;
   /* reset the text-align */
   text-align:left;
   /* inline-block space fix */
   margin-right:-4px;
}

然后，在你的HTML代码中：

    <div class=" row row-centered">
        <div class="col-*-*  col-centered>
           Your content
        </div>
    </div>
通过给出解释并提供答案，解释如何帮助 OP 解决当前的问题。 - ρяσѕρєя K
.row-centered 类： - Monero Jeanniton
.row-centered 类：<br> -text-align: center => 居中 .col 元素 <br>.col-centered：<br> -display: inline-block => 使 div 行内元素化，以便 "text-align" 属性对其生效，同时您可以为其设置宽度或高度（*-block）。<br> -float: none => float CSS 属性将元素从正常流中移除。因此，我们将其设置为 none。<br> -其余部分是一些技巧/Bootstrap（计数器）修复！<br>请查看此处： http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-centered-columns - Monero Jeanniton
这将使行内的所有列居中。因此，行内只有一个列。 - Monero Jeanniton
6
我们也可以这样使用`col-md-offset`，它可以帮助我们减少额外的`div`代码。因此，我们只需使用一个`div`而不是三个：
<div class="col-md-4 col-md-offset-4">Centered content</div>
6

只需使用text-center类

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>
5
这段代码可以帮助你。
<div class="row" style="display: flex; justify-content: center;"></div>
4

试一下，它有效！

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</div>
        </div>
    </div>
</div>

然后，在CSS中定义中心div的宽度并将其居中在文档中：
.center {
    margin: 0 auto;
    width: 80%;
}
简单明了。Bootstrap的“center-block”从未对我起作用。 - JoshYates1980
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接