Question

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

这有什么解决方案吗？我对这项工作一无所知。

Answer 1

为什么不使用网格系统？

引导网格系统由12列组成，因此如果使用“中”列，则其宽度为970像素。

然后你可以把它分成3列（12/3 = 4）所以使用3个div与“col-md-4”类：

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

Answer 2

您正在执行的操作无效，因为您将边距：auto应用于全角列。

将它包裹在一个div中并以那个为中心。 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

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

Answer 3

而不是

<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列和第1列中添加任何内容3这是一个更优雅的解决方案。偏移量“添加”前面的4列，在之后留下4“备用”。

PS我意识到初始问题没有指定偏移，但至少有一个先前的答案使用了一个CSS hack，如果你使用偏移量则不需要。因此，为了完整起见，我认为这是有效的。

Answer 4

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

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

但是，我不是CSS专业人士。希望这对某人有帮助。

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

只需使用文本中心课程

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

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

Answer 9

试试这个，它有效！

<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%;
}

Answer 10

这种安全的代码可以帮助您

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

Answer 11

我像这样使用text-align-center

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

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

Answer 12

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

这对我有用。

Answer 13

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

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

使用Bootstrap 3将行居中

13 个答案: