html - 居中可变长度定价表的内容

Question

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

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

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

我正在使用推特引导程序。

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

http://jsfiddle.net/vyjru/

谢谢您的帮助！

Answer 1

您可以将它们设置为display:inline-block，然后简单地将.pricing_sequence容器设置为，而不是将您的定价表项目浮动到左侧text-align:center;

http://jsfiddle.net/vyjru/1/

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;   
}