CSS 如何在中心对齐引导标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31941327/
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
how do I align bootstrap tabs in the center?
提问by user1227914
I have tabs like these:
我有这样的标签：
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Tab 2
</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
But instead of having them on the left, I'd like them in the center. I tried text-align:center;and even setting margin-left:0and margin-right:0but neither is working. What's the easiest way to do this without re-writing the whole code?
但与其让它们在左边，我更希望它们在中间。我试过text-align:center;甚至设置margin-left:0，margin-right:0但都不起作用。在不重新编写整个代码的情况下，最简单的方法是什么？
Here's a jsFiddle:
这是一个jsFiddle：
回答by Vishnu
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
回答by Zim
You have added a lot of custom CSS, but the easiest Bootstrap way is to use nav-tabsand nav-justified..
您已经添加了很多自定义CSS的，但最简单的引导方法是使用nav-tabs和nav-justified..
http://www.codeply.com/go/upP3lh2gxS
http://www.codeply.com/go/upP3lh2gxS
<ul class="nav nav-tabs nav-justified">
<li>..</li>
..
回答by user2962393
In Bootstrap 4:
在 Bootstrap 4 中：
<ul class="nav nav-tabs justify-content-center">
回答by jmknoll
Here is an updated fiddle: http://jsfiddle.net/j751b1mb/5/
这是一个更新的小提琴：http: //jsfiddle.net/j751b1mb/5/
The key is to set display: flex on the nav tabs and align them in the center of the page.
关键是在导航选项卡上设置 display: flex 并将它们对齐在页面的中心。
.nav-tabs {
display: flex;
justify-content: center;
flex-direction: row;
}
You can get more fine-grained control over the specific position of the tabs by modifying the margins on .tabbable-line > .nav-tabs > li
您可以通过修改页边距对选项卡的特定位置进行更细粒度的控制 .tabbable-line > .nav-tabs > li
.tabbable-line > .nav-tabs > li {
margin: auto 2px;
}
The code above will distribute them evenly across the line, for example.
例如，上面的代码将它们均匀地分布在整条线上。
Hope that helps.
希望有帮助。
回答by Kishan
回答by Maijied Hasan Shuvo
Try this in your CSS file or in style tag:
在你的 CSS 文件或样式标签中试试这个：
.nav-tabs
{
align-items: center;
}
回答by Anubhav pun
try this and replace with this
试试这个并用这个替换
.nav-tabs > li
{
float: none;
text-align: center;
}
.nav > li
{
display: inline-block;
}
回答by Gevorg Margaryan
Use text-center or text-middle class on your main element.
在主要元素上使用 text-center 或 text-middle 类。
