如何使用Bootstrap 4将列表居中？ [英] How can I center a list with Bootstrap 4?

问题描述

我正在构建一个使用Bootstrap 4测试版的应用程序。这个应用程序目前非常基础，只有一个内联列表。我正试图将此列表水平居中显示在屏幕中间。如这个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测试版将内联列表居中？

推荐答案

使用text-centerOR，

在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轴边距)将使DISPLAY：挡路或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

这篇关于如何使用Bootstrap 4将列表居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！