54

如何在 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>

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

4

13 回答 13

63

为什么不使用网格系统？

引导网格系统由 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>

每个都有 323px 的最大宽度大小。保持第一个和最后一个为空，并使用中间的使您的内容居中：

<div class="col-md-4"></div>
<div class="col-md-4">
   <p>Centered content.</p>
</div>
<div class="col-md-4"></div>
于 2014-03-01T12:11:54.560 回答
58

What you are doing is not working, because you apply the margin: auto to the full-width column.

Wrap it in a div and center that one. E.g:

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

.

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

http://www.bootply.com/93751

Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.

于 2013-11-12T22:52:33.803 回答
40

我知道这个问题是专门针对 Bootstrap 3 的，但是如果 Bootstrap 4 用户偶然发现了这个问题，下面是我如何在 v4 中将行居中：

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

可以在 bootstrap站点上找到与此主题相关的更多信息。

于 2018-07-19T17:39:16.277 回答
20

代替

<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，如果您使用偏移量，这是不必要的。因此，为了完整起见，我认为这是有效的。

于 2015-10-13T08:41:54.023 回答
10

您可以使用网格系统而不添加空列

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

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

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

于 2014-05-13T08:01:44.057 回答
6

我们也可以像这样使用 col-md-offset，它可以让我们免于额外的 div 代码。因此，我们可以只使用一个 div 来代替三个 div：

<div class="col-md-4 col-md-offset-4">Centered content</div>
于 2016-02-13T17:38:17.630 回答
6

将此添加到您的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>
于 2017-01-03T17:05:35.660 回答
6

只需使用文本中心类

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>
于 2016-04-25T11:22:44.877 回答
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%;
}
于 2015-04-04T13:17:51.160 回答
4

这种和平的代码可以帮助你

<div class="row" style="display: flex; justify-content: center;"></div>
于 2020-02-07T10:19:48.210 回答
1

我像这样连续使用 text-align-center

<div class="row tac">
    <h1>Centered content</h1>
</div>

<style>
 .tac { text-align: center}
</style>
于 2017-06-10T17:16:38.870 回答
-2

我使用这种和平的代码，我成功了

<div class="row  center-block">
<div style="margin: 0 auto;width: 90%;"> 
    <div class="col-md-12" style="top:10px;">
    </div>
    <div class="col-md-12" style="top:10px;">
    </div>
 </div>

于 2015-11-09T19:38:12.343 回答
-3

与其尝试将 div 居中，不如将其添加到您的本地 css 中。

.col-md-offset-15 {
    margin-left: 12.4999999%;
}

which is roughly  offset-1 and half of offset-1. (8.333% + 4.166%) = 12.4999%

这对我有用。

于 2019-03-31T17:54:31.867 回答