twitter-bootstrap Bootstrap 3 中单元格的中心 ul
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41553885/
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
Center ul in cell in Bootstrap 3
提问by user687554
I have a web page that uses Bootstrap 3. In this web page, I'm trying to center a ulwithin a col-xs-12. Currently, in this Bootply, I have the following:
我有一个使用 Bootstrap 3 的网页。在这个网页中，我试图将 aul放在col-xs-12. 目前，在这个Bootply 中，我有以下内容：
<div class="container">
<div class="row">
<div class="col-xs-12 center-block" style="background-color:grey;">
<ul class="list-inline">
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
</ul>
</div>
</div>
</div>
As shown, the ulis left-aligned within the div. How do I center the ulin the div. If that's not possible, how do I horizontally center a list of horizontally laid out items?
如图所示，ul在div. 我如何ul将div. 如果这是不可能的，我如何将水平布局的项目列表水平居中？
回答by grinmax
<ul class="list-inline">
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
</ul>
.list-inline {
display: flex;
justify-content: center;
}
回答by Sai Ram
Try adding properties display:flexand justify-content:centerto div
尝试添加属性display:flex和justify-content:centerdiv
回答by shihab
<div class="container">
<div class="row">
<div class="col-xs-12 center-block align" style="background-color:grey;">
<ul class="list-inline">
<li><div class="item">aaa</div></li>
<li><div class="item">vvv</div></li>
<li><div class="item">eee</div></li>
<li><div class="item">eee</div></li>
<li><div class="item">eee</div></li>
</ul>
</div>
<style>.align ul{position:relative;left:50%;float:left;margin-right:0;margin-left:0;}</style>
回答by shihab
for horizontally center you can use the following code:
对于水平居中，您可以使用以下代码：
<div class="container">
<div class="row">
<div class="col-xs-12 center-block" style="background-color:grey;">
<ul class="list-inline">
<li><div class="item">aaa</div></li>
<li><div class="item">vvv</div></li>
<li><div class="item">eee</div></li>
<li><div class="item">eee</div></li>
<li><div class="item">eee</div></li>
</ul>
</div>
<style>
.center-block ul{position:relative;left:50%;float:left;margin-right:0;margin-left:0;}
.center-block li {position:relative;right:50%;float:left;margin:0;list-style:none}
</style>
<style>
.center-block ul{position:relative;left:50%;float:left;margin-right:0;margin-left:0;}
.center-block li {position:relative;right:50%;float:left;margin:0;list-style:none}
</style>
回答by Zim
Just use Bootstrap text-centerwhich works to center inline elements. No extra CSS is needed.
只需使用text-center可将内联元素居中的Bootstrap 。不需要额外的 CSS。
<div class="container">
<div class="row">
<div class="col-xs-12" style="background-color:grey;">
<ul class="list-inline text-center">
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
<li><div class="item"></div></li>
</ul>
</div>
</div>
</div>
