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

Question

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

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

我无法弄清楚如何将所有计划集中在一个更大的灰色div中。

我正在使用twitter bootstrap。

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