中心使用display：inline-block对齐包装的内容

Question

我有一个内联块菜单（使用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 父，display:inline-block 孩子将叠加在中间并换行。后续行也将居中对齐。所以这样做：

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

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

Answer 2

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