Bootstrap：如何将col-md-5居中？

Question

我觉得这是一个非常奇怪的问题，但我似乎在网上找不到解决方案。

如果我有一个col-md-5，我似乎无法将其居中。 就我所了解的网格系统而言，如果我选择列大小（1-12），为了控制列的位置，我使用col-##-offset-#。

因此，如果我有一个col-md-4，我将使用col-md-offset-4将其从左侧推出4列，然后它将居中。想法是，要使列居中，必须在网格中从左侧和右侧具有相同数量的列。

现在，如果我有一个，比如说，col-md-5？我该如何将其居中？ 做类似于col-md-4的事情会留下右侧3个。我尝试了几种方法，但没有成功。

提前致谢。

- Ethan McKee

Answer 1

Bootstrap 5

在Bootstrap 5中（以及Bootstrap 4中），可以通过使用mx-auto来实现自动左/右边距...

<div class="container">
  <div class="row">
     <div class="col-sm-5 mx-auto">
        Centered
    </div>
  </div>
</div>

- Zim

---

这在Bootstrap 5中也适用。 - Collin Krawll

Answer 2

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-md-offset-3">
    </div>
</div>

- Ryan Friedman

---

最聪明的答案！如果你想做像 col-*-3 居中这样的事情，你不能这样做，因为你没有 col-*-offset-4.5，但是你可以使用 col-*-4 和 col-*-offset-4。是的，它可能对你的目的来说太大了，但是hack的方法是添加一个内部div指定其他的大小和偏移来居中它。例如 col-*-8 和 col-*-offset-2。结果比父div指定的短，但比仅将 col-*-2 和 col-*-offset-5 应用于父div要大。这应该是被接受的答案。 - gsubiran

Answer 3

Twitter bootstrap在列col-*-#上应用float属性。首先，我们需要通过重新设置float为none来覆盖它，以针对特定的列。

然后，我们可以给该列设置margin-left/right的值为auto，以水平居中对齐它 - 示例在这里。

@media (min-width: 992px) {
  .col-md-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-5 col-md-center">
    <!--                 ^-- Added class name
     --> ...
    </div>
  </div>
</div>

- Hashem Qolami

---

有一种更简单的方法可以利用现有的Bootstrap类来完成。请查看我的答案。 - Ryan Friedman

@Ryan Friedman，你的方法并不是最好的，因为你创建了一个父div来获取你想要的东西，而我认为这个方法才是最好的。 - DarkteK

最好使用内置的Bootstrap类来处理响应式设计，而不是创建一个带有媒体查询的新CSS类并添加。这是本页面提供的最佳解决方案，父级div本身没有任何问题。 - Ryan Friedman

Answer 4

最好的方法是为此创建自己的规则，创建一个4.5的偏移量。

左边距 = (100/12) * (12-5) / 2 = 29.175%

.col-xs-5 {
  background-color: red;
}
.col-xs-offset-4_5 {
  margin-left: 29.175%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-5 col-xs-offset-4_5">.col-xs-5</div>
    </div>
  </div>
</div>

或者您可以采用这种方法，利用6列，但通过在每侧添加半列填充来删除1列。

.col-xs-6.morepadding {
  padding: 0px 4.16%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 morepadding">.col-xs-6 with half the width of a column as padding on each side</div>
    </div>
  </div>
</div>

- turbopipp

---

有一种更简单的方法可以利用现有的Bootstrap类来完成。请查看我的答案。 - Ryan Friedman

Answer 5

请看这篇文章和最佳答案： 使用Twitter Bootstrap 3居中列

具体来说，“方法#2”应该是你要找的

演示：http://jsfiddle.net/85oy836u/1/

<div class="container">
<div class="row text-center">
    <div class="col-xs-5" style="float: none; margin: 0 auto; background: green;">col-xs-5</div>
</div>
    </div>

- EdwardM

---

看起来Hashem已经回答了我的问题 :) - EdwardM

Answer 6

你可以试试这个

.col-centered {
display:inline-block;
float:none;
}

这是相关的 html 代码

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

这只是一个概念，但这里有一个我在网上找到的 例子。

- Mike Ross

Answer 7

尝试添加类 text-center，像这样：

 <div class="row">
<div class="col-md-12 text-center">
BLABLA
</div>
</div>

这个解决方案也适用于col-md-5

- Luiz Paulo Camargo

---

我只是提供了一个解决方案。如果对你没有用，抱歉，但是不必要地给我的回答点踩。 - Luiz Paulo Camargo

抱歉给你点了踩，但 text-center 只会让文本居中，不会有其他效果。 - Adel Ben Hamadi