如何集中这些元素？

Question

我找到了很棒的代码片段，但当我尝试修改它以满足我的需求时，我无法完全理解它，我希望有人能指出我正确的方向。

有问题的摘录就是这个：code

我只想要三个标签并让它们居中，有点像片段中的示例只有标签2,3和4，到目前为止我怀疑这是控制该部分风格的内容：

.board .nav-tabs {
    position: relative;
    /* border-bottom: 0; */
    /* width: 80%; */
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;

}

有什么建议吗？

编辑：

Answer 1

请参阅此代码段http://bootsnipp.com/user/snippets/40NRR

我使用了display flex，然后设置了.nav-tabs的百分比宽度，使其居中。还有一些其他的小样式，比如改变border-bottom的居住地。

编辑：该代码段似乎没有显示。

.board .nav-tabs {
    display: flex;
    position: relative;
    border-bottom: 0;
    width: 80%;
    margin: 40px auto;
    margin-bottom: 0;
    box-sizing: border-box;
}
.board .nav-tabs > li {
    flex: 1;
    width: 20%;
}

Answer 2

我认为这是你的解决方案

.board {
  text-align: center;
} 
.board .nav-tabs {
  position: relative;
  display : inline-block ;
  vertical-align: middle;
}