html - 可変長価格表のコンテンツのセンタリング

Question

基本的な価格表を作成しようとしています。

テーブルは可変長にすることができます。プランが 1 つしかない場合もあれば、プランが 5 つある場合もあります。

大きな灰色の div 内ですべての計画を中央に配置する方法がわかりません。

Twitterのブートストラップを使用しています。

これがjsfiddleです。計画が灰色の領域の中央ではなく、左側に浮いていることに注目してください。

http://jsfiddle.net/vyjru/

助けてくれてありがとう！

Answer 1

価格表のアイテムを左にフロートさせる代わりに、アイテムを として設定し、次にコンテナーをdisplay:inline-block単純に設定することができます。.pricing_sequencetext-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;   
}