将包裹的内容与显示居中对齐：内联块

Question

我有一个内联块菜单（由引导程序3制作），我想知道是否有可能使对齐的内容居中对齐吗？

这是一个突出问题的Codepen

http://codepen.io/Kathrynwatts/pen/VebjzW

如您所见，当您缩小屏幕尺寸时，所有列表项都向左对齐（这是默认的环绕行为）。 如果可以的话，我希望它们包裹在中间。

的CSS

.plays-nav { //parent container
font-weight: 400;
letter-spacing: 3px;
}

.plays-nav>li { //menu list items
text-align: center;
}

.navbar-centered .navbar-nav { //parent container
    float: none;
    text-align: center;
}
.navbar-centered .navbar-nav > li { //menu list items
    float: none;
}

.navbar-centered .nav > li { //menu list items
    display: inline-block;
            text-align: center;
            margin: 0 auto;
}

Answer 1

如果将text-align:center 为parent ，则display:inline-block 子代将堆叠在中间并环绕。 随后的行也将居中对齐。 所以这样做：

.plays-nav {
    text-align: center;
}

注意：当使用该解决方案确保left和right补白父都是平等的，没有float s的儿童设置。

Answer 2

将代码注释//parent container更改为/* parent container */ 。 您的代码正确，但是注释格式错误，CSS注释的格式必须为/* comment content*/ ，否则注释之后的代码可能会受到影响。