Центрирование содержимого таблицы с переменной длиной таблицы

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