如何使用 Bootstrap 4 将列表居中？

Question

我正在使用 Bootstrap 4 beta 构建一个应用程序。这个应用程序目前非常基本，并且有一个内联列表。我正在尝试将此列表水平居中在屏幕中间。如这个 Bootply 所示，我认为 justify-content-center 会做到这一点。然而，这并没有奏效。我尝试了我在 这里 看到的其他定心类，但没有任何运气。我的列表如下所示：

 <div>
  <ul class="list-inline justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>
  </ul>
</div>

如何使用 Bootstrap 4 beta 将内联列表居中？

原文由 user687554 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 text-center _或_，

在 flexbox 容器内使用 mx-auto ( d-flex )..

https://www.bootply.com/6COUMfNrEU

 <div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>
  </ul>
</div>

如何在 Bootstrap 4 中居中工作…

text-center 用于显示：内联元素

mx-auto （自动x轴边距）将居中显示：块或显示：具有定义宽度（％，vw，px等）的flex元素。网格列上默认使用flexbox，所以也有各种居中方法…

居中文本或内联元素： text-center

 <div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

中心显示：块或显示：flex： mx-auto

 <div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

列也可以居中： mx-auto ，因为 row 是 display:flex

 <div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

演示 Bootstrap 4 水平居中

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想使用引导类，那么你可以使用 row

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <ul class="list-inline d-flex justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>
  </ul>
</div>

否则，只需 text-align:center 就足够了。

 ul.list-inline {
  text-align: center
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <ul class="list-inline">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>
  </ul>
</div>

原文由 Sankar 发布，翻译遵循 CC BY-SA 3.0 许可协议