Bootstrap 4 - 中心列表

Question

我正在使用Bootstrap 4 beta构建应用程序.这个应用程序目前非常基本,并且有一个内联列表.我试图将这个列表水平居中在屏幕中间.如本Bootply中所示,我认为justify-content-center会这样做.但是,这没有用.我试过我在这里看到的其他中心课程没有任何运气.我的列表看起来像这样:

<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 OR,

mx-auto在flexbox容器内使用(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轴边距)将居中显示:块或显示:具有定义宽度的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>

演示Bootstrap 4水平居中