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

2022-02-21 00:00:00 css twitter-bootstrap 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居中,因为rowdisplay:flex

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

Demo Bootstrap 4 Horizontal Centering

相关文章