中心使用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子级设置s.