html - CSS テーブルの整列

Question

この CSS テーブルを整列させようとしていますが、うまくいきません。margin-left 、 align=center などを試しましたが、どれもうまくいかないようです。

JSFiddle は次のとおりです: http://jsfiddle.net/pFSja/

CSS の一部を次に示します。

.pricing_table_wdg {  
border:1px solid #c4cbcc;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
float:left;
margin-top: 25px;
}

Answer 1

.container クラスに追加text-align: center;し、float:left を .pricing_table_wdg クラスに変更しdisplay: inline-block;ます

フィドル

.container
{
    text-align: center; /* <-- */
}
.pricing_table_wdg {  
    border:1px solid #c4cbcc;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    display: inline-block; /* <-- */
    margin-top: 25px;
}

Answer 2

この方法でもできます

クラスdisplay:tableに追加.pricing_table_wdg

このcssを追加します

.container
{
    text-align: center; /* <-- */
}