Html 可变长度定价表的中心内容

我正在尝试创建一个基本的定价表

表格可以是可变长度的：在某些情况下只有一个计划，在其他情况下可能有5个计划

我不知道如何将所有计划集中在一个较大的灰色分区中。

我正在使用twitter引导

这是jsfiddle。注意计划是如何浮动的左边而不是居中在灰色区域

中。

---

谢谢你的帮助

您可以将定价表项目设置为

display:inline block

，然后只需将

.pricing\u sequence

容器设置为

text align:center


CSS

.pricing_sequence{
    border:1px solid gainsboro;
    background-color:white;  
    text-align:center;
}

.pricing_sequence ol li{
    list-style:none;
    border-left:1px dashed gainsboro;    
    display:inline-block;
    *display:inline; /* ie7 fix */
    vertical-align:top;
    padding: 10px;
    text-align: center;
    width: 160px;
    overflow: visible;   
}

您可以将定价表项目设置为
display:inline block
，然后只需将
。pricing\u sequence
容器设置为
text align:center


CSS

.pricing_sequence{
    border:1px solid gainsboro;
    background-color:white;  
    text-align:center;
}

.pricing_sequence ol li{
    list-style:none;
    border-left:1px dashed gainsboro;    
    display:inline-block;
    *display:inline; /* ie7 fix */
    vertical-align:top;
    padding: 10px;
    text-align: center;
    width: 160px;
    overflow: visible;   
}

谢谢我还是想把白色的保持在160。在你给出的链接中，白色似乎伸展开来。我希望两个160（so 320px）集中在整个灰色区域，其余部分在320外显示灰色。@jignesh我明白你的意思，没有注意到，你也可以通过将
display:inline block
的属性应用到
ol
来实现这种效果。试试这个：安德烈斯，你太棒了！非常感谢。嘿，安德烈斯，还有一个问题：在两个定价计划框之间有一个垂直的空间。在右框的边框开始之前，可以在第一个框的右边缘看到它。我找不到原因。有什么想法吗？@jignesh，这是由于标记中存在空白，但可以通过将
font-size:0
添加到
ol
容器中，然后简单地重置
li
上的
font-size
来轻松删除。固定小提琴：谢谢。我还是想把白色的保持在160。在你给出的链接中，白色似乎伸展开来。我希望两个160（so 320px）集中在整个灰色区域，其余部分在320外显示灰色。@jignesh我明白你的意思，没有注意到，你也可以通过将
display:inline block
的属性应用到
ol
来实现这种效果。试试这个：安德烈斯，你太棒了！非常感谢。嘿，安德烈斯，还有一个问题：在两个定价计划框之间有一个垂直的空间。在右框的边框开始之前，可以在第一个框的右边缘看到它。我找不到原因。有什么想法吗？@jignesh，这是由于标记中存在空白，但可以通过将
font-size:0
添加到
ol
容器中，然后简单地重置
li
上的
font-size
来轻松删除。固定小提琴：