0

我很难在容器宽度上居中 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;
}

截图：在此处输入图像描述

4

6 回答 6

1

尝试丢失浮动并将显示更改为表格单元格：

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

您可能需要调整填充等，但它应该可以解决问题。

于 2013-02-15T16:30:21.587 回答
1

你需要取出float:left，设置你的ulatdisplay:table和lias display:table-cell。这是你的演示：http: //jsfiddle.net/vzNbr/1/

于 2013-02-15T16:34:16.960 回答
1

看看这是否是你需要的http://jsfiddle.net/vzNbr/2/

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

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

对此

#about ul.info li {
    margin:0 6.6666665%;
}
于 2013-02-15T16:40:23.740 回答
0

不完全确定它为什么向左浮动，但这似乎使它更加居中，尽管我怀疑这是最好的解决方案。

    #about {
    position: relative;
}
.container {
    position: relative;
    width: 70%;
    left:20%;
    }
于 2013-02-15T16:29:04.773 回答
0

如果你有 3 列，它们的宽度应该是 33,33%。为了不让边距为这 33% 增加额外的宽度，您可以使用 padding 和 box-sizing：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;
}
于 2013-02-15T16:37:29.423 回答
0

要使元素居中，请使用以下代码片段：在这种情况下，您有一个容器应该适合其子元素的总大小。如果您不知道它的大小，请在 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);
}

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

于 2013-02-15T16:45:48.107 回答