html - 在容器中居中 ul

Question

我很难将 3 个 li 元素置于容器宽度的中心。我正在处理响应式布局，所以我不想在任何元素上使用固定宽度。这是我的代码的 fiddle http://jsfiddle.net/vzNbr/

请注意，如果您扩展与容器左侧对齐而不是居中的输出屏幕。 CSS 很简单:

.container {
width: 70%;
margin: 0 auto;
}

#about {
background-color: #ebebeb;
height: 100%;
width: 100%;
}

#about ul.info {
display: block;
width: 100%;
margin: 0 auto;
list-style: none;
padding: 0;
}

#about ul.info li {
width: 20%;
float: left;
display: inline-block;
vertical-align: top;
margin: 1.5em;
font-size: .8em;
}

屏幕截图:

Answer 1

你需要取出float:left，将你的ul设置在display:table和li作为 display:table-cell。这是您的演示:http://jsfiddle.net/vzNbr/1/