CSS Bootstrap 4 - 中心列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45714674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 - Center List
提问by user687554
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-centerwould do it. However, that did not work. I tried the other centering classes I saw listed herewithout any luck. My list looks like this:
我正在使用 Bootstrap 4 测试版构建一个应用程序。这个应用程序目前非常基础，只有一个内联列表。我试图将这个列表水平居中在屏幕中间。如这个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>
How can I center an inline list with the Bootstrap 4 beta?
如何使用 Bootstrap 4 beta 将内联列表居中？
回答by Zim
Use text-centerOR,
使用text-center或，
Use mx-autoinside a flexbox container (d-flex)..
mx-auto在 flexbox 容器内使用( d-flex)..
https://www.bootply.com/6COUMfNrEU
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>
How to centering works in Bootstrap 4...
如何在 Bootstrap 4 中居中工作...
text-centeris used for display:inline elements
text-center用于显示：内联元素
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...
mx-auto（自动 x 轴边距）将使具有定义宽度的 display:block 或 display:flex 元素居中，（%、vw、px 等）。Flexbox 默认用于网格列，因此也有各种居中方法...
Center text or inline elements: text-center
居中文本或内联元素： 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>
Center display:block or display:flex: mx-auto
中心显示：块或显示：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>
Columns can also be centered with: mx-auto, because rowis display:flex
列也可以用: 居中mx-auto，因为row是display:flex
<div class="row">
<div class="col-4 mx-auto">
<h6>I'm .col-4 centered</h6>
</div>
</div>
回答by Sankar
If you want to use bootstrap classes then you can use row
如果你想使用引导类，那么你可以使用 row
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<ul class="list-inline d-flex 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>Otherwise, Simply text-align:centeris enough.
否则，Simplytext-align:center就足够了。
ul.list-inline {
text-align: center
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div>
<ul class="list-inline">
<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>回答by Nasir T
You need to use the class text-centerwhich actually centers the block in the screen using the text-alignproperty within bootstrap css.
您需要使用bootstrap css 中text-center的text-align属性来使用实际将块居中的类。
<div>
<ul class="list-inline text-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>
Hope this helps.
希望这可以帮助。
回答by Mukesh Ram
Use display:flexfor ul because justify-content-centerworks with flexbox
使用display:flex用于UL因为justify-content-center与Flexbox的作品
ul {
display:flex;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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>