使用 Bootstrap 3 居中一行答案

【问题标题】：center a row using Bootstrap 3使用 Bootstrap 3 居中一行
【发布时间】：2020-05-10 23:42:43
【问题描述】：

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

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

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

为什么不使用网格系统？

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

【讨论】：

@AmelSalibasic 此回答针对问题，请先阅读问题。
解释条款和条件

【解决方案2】：

您正在做的事情不起作用，因为您将 margin: auto 应用于全宽列。

将其包装在一个 div 中并将其居中。例如：

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

.

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

http://www.bootply.com/93751

无论如何，它是一个更简洁的解决方案，因为它更具表现力，而且您通常不想弄乱网格。

【讨论】：

我使用：
...
。工作。谢谢@hugo der hungrige
在不猜测行宽的情况下这样做怎么样？

【解决方案3】：

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

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

更多与此主题相关的内容可以在 bootstrap site 上找到。

【讨论】：

这应该是答案！
justify-content-center 是我遇到的问题所需要的。谢谢！
@Ali：这不应该是答案，因为它在 BS3 中不起作用。如果您是来这里寻求帮助的，那么您可能不在 BS4 上。

【解决方案4】：

代替

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

【讨论】：

安静简单足够+1

【解决方案5】：

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

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

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

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

【讨论】：

在投反对票之前尝试一下
@smartmouse 将<div class="col-lg-4" style="float:none;"> 更改为此<div class="col-xs-4 center-block" style="float:none;">。只需尝试仅以所需宽度包装居中内容，仅此而已。 col-lg-4 要大得多，内容会向左浮动，在 div 内。

【解决方案6】：

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

<div class="col-md-4 col-md-offset-4">Centered content</div>

【讨论】：

【解决方案7】：

简单地使用文本中心类

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>

【讨论】：

【解决方案8】：

将此添加到您的 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 解决当前问题
.row-centered 类：
.row-centered 类：
-text-align : center => 将 .col 元素居中
.col-centered:
-display: inline-block => 使 div 像一个内联元素一样，因此“text-align”属性可以对其产生影响，同时您可以设置宽度或高度 (*-块）为它。
- float: none => float CSS 属性从正常流中移除元素。所以，我们将其设置为无。
- 剩下的就是一些技巧/引导（反）修复！
在这里查看：minimit.com/articles/solutions-tutorials/…
这将使行内的所有列居中。因此，也是该行内唯一的一列。

【解决方案9】：

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

<div class="row" style="display: flex; justify-content: center;"></div>

【讨论】：

【解决方案10】：

试试这个，它有效！

<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的宽度：

.center {
    margin: 0 auto;
    width: 80%;
}

【讨论】：

漂亮而简单。引导程序“中心块”对我从来没有用过。

【解决方案11】：

我像这样在一行中使用 text-align-center

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

<style>
 .tac { text-align: center}
</style>

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

不要尝试将 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%

这对我有用。

【讨论】：

请仔细阅读问题...这个标题说他们不想使用offset，但很高兴它对您的应用程序有用。