Bootstrap 4 - 中心列表答案

【问题标题】：How can I center a list with Bootstrap 4?Bootstrap 4 - 中心列表
【发布时间】：2018-01-24 15:54:05
【问题描述】：

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

<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 将内联列表居中？

【问题讨论】：

justify-content-center 用于display:flex 元素

标签： css twitter-bootstrap bootstrap-4

【解决方案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 用于 display:inline 元素

mx-auto（自动 x 轴边距）将居中 display:block 或 display:flex 具有定义宽度（%、vw、px 等）的元素。网格列上默认使用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>

Demo Bootstrap 4 Horizontal Centering

【讨论】：

【解决方案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>

【讨论】：

小心.row。由于负边距，它仅用于包含列 (col-*)。
@ZimSystem 谢谢你的提醒。但我认为将.row 包装成.container 就足够了。
.row 只能是used to group columns。您的解决方案仅适用于行添加display:flex，因此最好改用d-flex 类。
在 flexbox 容器中使用 mx-auto (d-flex)

【解决方案3】：

您需要使用 text-center 类，它使用 bootstrap css 中的 text-align 属性在屏幕中实际居中。

<div>
   <ul class="list-inline text-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>

希望这会有所帮助。

【讨论】：

【解决方案4】：

对 ul 使用 display:flex，因为 justify-content-center 与 flexbox 一起使用

ul {
  display:flex;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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>

【讨论】：