Html Twitter Bootstrap：中心药丸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7165423/
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
Twitter Bootstrap: Center Pills
提问by glenn
My question is how you can center the pills?
我的问题是如何使药丸居中？
I've tried to add center block around and also to change the float:leftto float:centerbut nothing helps.
我试图在周围添加中心块并更改为float:left，float:center但没有任何帮助。
回答by Preston Badeer
This has gotten much simpler!You just need to use the text-centerclass on the container, and apply display:inline-blockto the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.
这变得简单多了！你只需要使用text-center的容器类，并应用display:inline-block到ul。只需确保您有一个换行符或段落标记将导航与容器内的任何其他元素分隔开。
Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).
完毕！2 个类添加，1 行 CSS（不要修改引导 css 文件！）。
HTML:
HTML：
<div class="col-md-12 text-center">
<p>Copyright stuff</p>
<ul class="nav nav-pills center-pills">
<li><a href="#">Footer nav link</a></li>
<li><a href="#">Footer nav link</a></li>
</ul>
</div>
CSS:
CSS：
.center-pills { display: inline-block; }
Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enoughthat you may want to use that instead:
2015 年编辑：正如 Artur Beljajev 所提出的，Flexbox 支持现在已经足够普遍，您可能想改用它：
.center-pills {
display: flex;
justify-content: center;
}
回答by broox
If you'd like variable width pills in a variable width container, I'd suggest using the inline-blockdisplay type and adding a class to the pill container.
如果您希望在可变宽度容器中使用可变宽度药丸，我建议使用inline-block显示类型并向药丸容器添加一个类。
Here is how I extended bootstrap for centering pills.
这是我如何扩展引导程序以将药丸定心。
CSS:
CSS：
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */
HTML:
HTML：
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills">
<li><a href="#">derek</a></li>
<li><a href="#">brooks</a></li>
<li><a href="#">is</a></li>
<li><a href="#">super</a></li>
<li class="active"><a href="#">awesome</a></li>
</ul>
</div>
</div>
回答by Artur Beljajev
Or flexbox approach:
或 flexbox 方法：
.nav-pills {
display: flex;
justify-content: center;
}
回答by minaz
If you want the pills to be centered instead of left aligned you will need to change the css. You will need to specifiy a width and change the margin to be auto.
For example:
如果您希望药丸居中而不是左对齐，则需要更改 css。您需要指定宽度并将边距更改为自动。
例如：
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 400px;
}
回答by JeanMertz
While the answer of @minaz works for a list with a known width, i'd propose a different solution which actually works even if you change the content of the list:
虽然@minaz 的答案适用于宽度已知的列表，但我提出了一个不同的解决方案，即使您更改列表的内容，它也确实有效：
.tabs, .pills {
text-align: center;
}
.tabs li, .pills li {
float: none;
}
Or in SCSS:
或者在 SCSS 中：
.tabs, .pills {
text-align: center;
li { float: none; }
}
This will center the text inside the list, and resets the floatproperty for the list items so they are affected by the text-alignproperty.
这将使列表内的文本居中，并重置float列表项的属性，使其受该text-align属性的影响。
回答by Samuel Diogo
A simple solution with Bootstrap 4Use justify-content-centerat <ul>nav
Bootstrap 4 的简单解决方案justify-content-center在<ul>导航中
使用
Example:
例子：
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="card text-white bg-success mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="card text-white bg-info mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="card text-white bg-danger mb-3 mx-2 px-2">
<h1>Ni Hao</h1>
</div>
</div>
</div>
</div>回答by Kerry7777
Bootstrap 4 solution is very easy:
Bootstrap 4 解决方案非常简单：
<ul class="nav justify-content-center">
