Can'；t中心div和CSS验证

我试图将整个定价表居中，但我似乎无法做到这一点。我使用类ePricingTable作为容器。另外，有人可以检查我的css，让我知道它是否做得正确吗

<div class="ePricingTable">
<div class="ePricingBox left">
    <div class="ePackageName left">
        <h1>Personal</h1>
    </div>
    <div class="ePackageInfoLogo">
        <p>&nbsp;</p>
        <ul class="triangle green">
            <li><strong>4 </strong>Design Concepts</li>
            <li><strong>2 </strong>Dedicated Designers</li>
            <li><strong>2 </strong>Design Revisions</li>
            <li><strong>7 </strong>Final Files</li>
        </ul>
    </div>
    <div class="ePriceBox ePriceShadow">
        <h2>$179</h2>
    </div>
    <div class="ePricingButton"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
    </div>
</div>
<div class="ePricingBox eBestValue">
    <div class="ePackageName">
        <h1>Business</h1>
    </div>
    <div class="ePackageInfoLogoBestValue">
        <p>&nbsp;</p>
        <ul class="triangle green">
            <li><strong>6 </strong>Design Concepts</li>
            <li><strong>3 </strong>Dedicated Designers</li>
            <li><strong>Unlimited </strong>Design Revisions</li>
            <li><strong>7 </strong>Final Files</li>
            <li><strong>250 </strong>Printed Business Cards</li>
        </ul>
    </div>
    <div class="ePriceBox eValuePriceShadow">
        <h2>$299</h2>
    </div>
    <div class="ePricingButton"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
    </div>
    <div class="h015">&nbsp;</div>
</div>
<div class="ePricingBox right">
    <div class="ePackageName right">
        <h1 epricingplain="">Business Pro</h1>
    </div>
    <div class="ePackageInfoLogo">
        <p>&nbsp;</p>
        <ul class="triangle green">
            <li><strong>10 </strong>Design Concepts</li>
            <li><strong>5 </strong>Dedicated Designers</li>
            <li><strong>Unlimited </strong>Design Revisions</li>
            <li><strong>7 </strong>Final Files</li>
            <li><strong>1000 </strong>Printed Business Cards</li>
        </ul>
    </div>
    <div class="ePriceBox ePriceShadow">
        <h2>$499</h2>
    </div>
    <div class="ePricingButton"><a class="readon smallmarginright" href="index.php?option=com_proforms&amp;view=form&amp;jid=2&amp;Itemid=188"><span>WORK REQUEST</span></a>
    </div>
</div>

改变

.ePricingTable {
    width: 1000px;
}

到

但接下来必须创建一个具有特定宽度的额外外部div。

IE

需要

否则

边距：0自动无效：）
1-父元素（ePricingTable）在HTML底部缺少结束标记

2-你的CSS看起来不错

3-如果添加缺少的结束标记，容器将居中。但是由于子元素的总宽度小于1000px（您为容器元素设置了这个宽度），所以内容不会完全居中于页面中心

使其完全居中的解决方案：

1-将每个ePricingBox设置为绝对宽度（以像素为单位），然后计算ePricingTable的宽度，并将其设置为像素

.ePricingBox{
    width:300px;
}

.ePricingTable{
    width:900px; /* THREE ePricingBox s */
 }

或者为容器元素指定一个绝对宽度，并使用百分比定义子元素的宽度

.ePricingBox{
    width:30%; /* ONE-THIRD OF THE PARENT ELEMENT'S WIDTH */
}

.ePricingTable{
    width:900px;
}

2-如果您不知道每个ePricingBox的确切宽度，也可以使用CSS的表格显示

.ePricingTable{
    display:table;
 }

.ePricingBox{
    display:table-cell;
 }

这应该是关键。
您也错过了结束语
。另一方面，对于清晰易懂的问题，你将获得更多的选票。考虑编辑它，以便其他人能够更容易地认同它。
.ePricingBox{
    width:300px;
}

.ePricingTable{
    width:900px; /* THREE ePricingBox s */
 }

.ePricingBox{
    width:30%; /* ONE-THIRD OF THE PARENT ELEMENT'S WIDTH */
}

.ePricingTable{
    width:900px;
}

.ePricingTable{
    display:table;
 }

.ePricingBox{
    display:table-cell;
 }