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

How can I center a list with Bootstrap 4?(如何使用Bootstrap 4将列表居中?)

本文介绍了如何使用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

这篇关于如何使用Bootstrap 4将列表居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何使用Bootstrap 4将列表居中?

基础教程推荐