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

Question

我正在使用 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 将内联列表居中？

Answer 1

使用text-center或，

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

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 轴边距)将使 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>

中心显示: block 或显示: 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