在容器中居中ul

Question

我很难将3个li元素放在容器的宽度上。我正在开发一个响应式布局，所以我不想在任何元素上使用固定宽度。这是我的代码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;
}

ScreenShot：

Answer 1

尝试丢失浮动并将显示更改为table-cell：

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

你可能不得不调整填充等，但它应该可以解决问题。

Answer 2

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

Answer 3

看看那是否需要http://jsfiddle.net/vzNbr/2/

我放了一些颜色只是为了清楚地看到它，但是，你只需要改变

#about ul.info li {
    margin: 1.5em;
}

到这个

#about ul.info li {
    margin:0 6.6666665%;
}

Answer 4

不完全确定为什么它会漂浮左侧，但这似乎让它更加集中，但我怀疑它是最好的解决方案。

    #about {
    position: relative;
}
.container {
    position: relative;
    width: 70%;
    left:20%;
    }

Answer 5

如果您有3列，其宽度应为33,33％。 为了不让边距为这个33％添加额外的宽度，你可以使用填充和框大小：border-box。

http://jsfiddle.net/willemvb/n8gkK/

#about ul.info li {
    width: 33.33%;
    float: left;
    display: inline-block;
    padding: 1.5em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 6

将元素居中，请使用以下代码段： 在这种情况下，你有一个容器应该适合它的孩子总大小。如果你不知道它的大小，请在firebug或chrome inspect-element中检查它并使用下面的内容。

.centered {
  position: based on your choice;
  top: 50%;
  left: 50%;
  margin-top: -(container-element_height/2);
  margin-left: -(container-element_width/2);
}

如果您的容器元素没有已知的大小，您应该像表格一样规则布局。