Question

I am trying to create a basic pricing table.

The table can be of variable length: In some cases there is only 1 plan, in other cases there might be 5 plans.

I can’t figure out how to center all of the plans within a larger gray div.

I am using twitter bootstrap.

Here is the jsfiddle. Notice how the plans are floating left instead of centering in the middle of the gray area

http://jsfiddle.net/vyjru/

Thanks for the help!

Answer 1

Instead of floating your pricing table items to the left, you can set them as display:inline-block and then simply set the .pricing_sequence container to 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;   
}