我很难在容器的整个宽度上将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;
}
屏幕截图:
最佳答案
您需要取出float:left
,将ul
设置为display:table
,将li
设置为display:table-cell
。这是您的演示:http://jsfiddle.net/vzNbr/1/
关于html - 在容器中居中ul,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14898664/