Bootstrap 4-中心列表 [英] Bootstrap 4 - Center List

问题描述

我正在使用Bootstrap 4 Beta构建一个应用程序.此应用目前确实很基本，并且只有一个内联列表.我试图将此列表在屏幕中间水平居中.如 Bootply 所示，我以为justify-content-center可以做到.但是，那没有用.我尝试了此处列出的其他居中类，但是没有任何运气.我的列表如下:

I am building an app with the Bootstrap 4 beta. This app is really basic at the moment and has a single inline list. I'm trying to center this list horizontally in the middle of the screen. As shown in this Bootply, I thought justify-content-center would do it. However, that did not work. I tried the other centering classes I saw listed here without any luck. My list looks like this:

<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中使内联列表居中?

How can I center an inline list with the Bootstrap 4 beta?

推荐答案

使用text-center OR ，

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

Use mx-auto inside a flexbox container (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用于display:inline元素

text-center is used for display:inline elements

mx-auto(自动x轴边距)将使display:block或display:flex元素居中，这些元素具有定义的宽度(％，vw，px等).默认情况下，Flexbox用于网格列，因此还有多种居中方法...

mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various centering methods...

中心文本或嵌入式元素:text-center

Center text or inline elements: 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>

中心显示:阻止或显示:弯曲:mx-auto

Center display:block or display: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

Columns can also be centered with: mx-auto, because row is display:flex

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

演示引导程序4水平居中

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