html - 居中对齐包装内容与显示 : inline-block

Question

我有一个内联 block 菜单(使用 bootstrap 3 制作)，我想知道是否可以居中对齐任何包装的内容？

这是突出问题的代码笔

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 children 将堆叠在中间和包装。随后的行也将居中对齐。所以这样做:

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

注意:使用此解决方案时，请确保父级上的 left 和 right 填充相等，并且未在子级上设置 float .