Html Div未在基于引导的模板中居中

如果您转到价格部分，您将看到4个定价表，如果我删除1个定价表，则所有定价表都将左对齐

如何将它们居中，我尝试了

margin:0 auto但它不起作用，我是bootstarp新手请帮助

将4个价格框扭曲的邮件表类具有以下css

ul.tables {
    margin: 70px auto 0;
}

HTML是

<ul class="tables">

                <!-- Table -->
                <li data-animation-delay="300" data-animation="fadeIn" class="col-xs-3 pricing-table relative animated fadeIn visible">
                    <!-- Table Inner -->
                    <div class="table-inner">
                        <!-- Table Top -->
                        <div class="price-table-top">
                            <!-- Header -->
                            <h3 class="uppercase bold white absolute">starter</h3> 
                            <!-- Image Link -->
                            <a class="price-table-img pattern-grid">
                                <!-- Your Image -->
                                <img alt="" src="images/tables/1.jpg">
                            </a>
                            <!-- Price Circle -->
                            <a class="price-circle absolute dark">
                                <!-- Price -->
                                <p class="price playball bigger">$19</p>
                                <!-- Timely -->
                                <p class="timely italic normal">Monthly</p>
                            </a>
                        </div><!-- End Table Top -->
                        <!-- Price Plans -->
                        <ul class="price-plans">
                            <li class="price-plan uppercase bold italic"><span class="colored">5 bonus</span> points every month</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">2 Months</span> Support</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">10</span> Subdomains</li>
                        </ul><!-- End Price Plans -->
                        <!-- Buy Now Button -->
                        <a class="price-buy-now uppercase semibold white" href="#">Buy Now</a>
                    </div><!-- End Table Inner -->
                </li><!-- End Table -->


                <!-- Table -->
                <li data-animation-delay="300" data-animation="fadeIn" class="col-xs-3 pricing-table relative animated fadeIn visible">
                    <!-- Table Inner -->
                    <div class="table-inner">
                        <!-- Table Top -->
                        <div class="price-table-top">
                            <!-- Header -->
                            <h3 class="uppercase bold white absolute">standart</h3> 
                            <!-- Image Link -->
                            <a class="price-table-img pattern-grid">
                                <!-- Your Image -->
                                <img alt="" src="images/tables/2.jpg">
                            </a>
                            <!-- Price Circle -->
                            <a class="price-circle absolute dark">
                                <!-- Price -->
                                <p class="price playball bigger">$39</p>
                                <!-- Timely -->
                                <p class="timely italic normal">Monthly</p>
                            </a>
                        </div><!-- End Table Top -->
                        <!-- Price Plans -->
                        <ul class="price-plans">
                            <li class="price-plan uppercase bold italic"><span class="colored">5 bonus</span> points every month</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">2 Months</span> Support</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">10</span> Subdomains</li>
                        </ul><!-- End Price Plans -->
                        <!-- Buy Now Button -->
                        <a class="price-buy-now uppercase semibold white" href="#">Buy Now</a>
                    </div><!-- End Table Inner -->
                </li><!-- End Table -->


                <!-- Table -->
                <li data-animation-delay="300" data-animation="fadeIn" class="col-xs-3 pricing-table relative active animated fadeIn visible">
                    <!-- Table Inner -->
                    <div class="table-inner">
                        <!-- Table Top -->
                        <div class="price-table-top">
                            <!-- Header -->
                            <h3 class="uppercase bold white absolute">professional</h3> 
                            <!-- Image Link -->
                            <a class="price-table-img pattern-grid">
                                <!-- Your Image -->
                                <img alt="" src="images/tables/3.jpg">
                            </a>
                            <!-- Price Circle -->
                            <a class="price-circle absolute dark">
                                <!-- Price -->
                                <p class="price playball bigger">$59</p>
                                <!-- Timely -->
                                <p class="timely italic normal">Monthly</p>
                            </a>
                        </div><!-- End Table Top -->
                        <!-- Price Plans -->
                        <ul class="price-plans">
                            <li class="price-plan uppercase bold italic"><span class="colored">5 bonus</span> points every month</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">2 Months</span> Support</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">10</span> Subdomains</li>
                        </ul><!-- End Price Plans -->
                        <!-- Buy Now Button -->
                        <a class="price-buy-now uppercase semibold white" href="#">Buy Now</a>
                    </div><!-- End Table Inner -->
                </li><!-- End Table -->


                <!-- Table -->
                <li data-animation-delay="300" data-animation="fadeIn" class="col-xs-3 pricing-table relative animated fadeIn visible">
                    <!-- Table Inner -->
                    <div class="table-inner">
                        <!-- Table Top -->
                        <div class="price-table-top">
                            <!-- Header -->
                            <h3 class="uppercase bold white absolute">enterprise</h3> 
                            <!-- Image Link -->
                            <a class="price-table-img pattern-grid">
                                <!-- Your Image -->
                                <img alt="" src="images/tables/4.jpg">
                            </a>
                            <!-- Price Circle -->
                            <a class="price-circle absolute dark">
                                <!-- Price -->
                                <p class="price playball bigger">$79</p>
                                <!-- Timely -->
                                <p class="timely italic normal">Monthly</p>
                            </a>
                        </div><!-- End Table Top -->
                        <!-- Price Plans -->
                        <ul class="price-plans">
                            <li class="price-plan uppercase bold italic"><span class="colored">5 bonus</span> points every month</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">2 Months</span> Support</li>
                            <li class="price-plan uppercase bold italic"><span class="colored">10</span> Subdomains</li>
                        </ul><!-- End Price Plans -->
                        <!-- Buy Now Button -->
                        <a class="price-buy-now uppercase semibold white" href="#">Buy Now</a>
                    </div><!-- End Table Inner -->
                </li><!-- End Table -->

                <!-- Clear -->
                <li class="clear"></li>
            </ul>



开胃菜


斯坦达特


专业的


企业



自动左/右页边距仅适用于宽度非自动（大多数元素的默认宽度）的元素（用于居中内容）

编辑：

值得注意的是，由于您正在为
元素使用引导
col-
类，只需将
行
类应用于
ul.tables
元素即可“免费”获得居中CSS：

<ul class="row tables">

    <!-- ... -->

</ul>



使用此css

ul.tables
{
width: 75%;
margin: 0 auto;
}

并用
col-xs-4
替换您的li类
col-xs-3
：

如果你想真正了解它是如何工作的，那么让我一步一步地告诉你哪里出了问题，你是如何推理的，以及你试图使用的定价表中的实际工作情况

要做到这一点，我们需要强调四个主要方面，它们定义了您所使用的表的结构






这四个元素中的css创建了整个部分的结构


让我们从最大的元素开始，然后逐步深入到最具体的元素

ul.tables {
    width: 65%; /* make this whatever works */
    margin: 70px auto 0;
}


Boostrap Css
.container{此css类为整个“container”节提供100%的宽度，只要媒体屏幕大于1200px。不重要的是，它将边距和填充设置为0px。}

自定义Css
元素中无

笔记
这就是我们所说的容器。它将宽度设置为100%（任何浏览器大小）。它包装了本节的内容


Boostrap CSS
没什么值得注意的

自定义CSS
.inner{
/*这个css类是一个自定义类，不包含在引导中。它有四个主要的样式属性来帮助定义整个结构。它建立了一个**最大宽度：1170px**，它用**边距：0自动**居中所有元素的1170px，它用**文本对齐：居中**对齐这个div下所有子元素的文本，最后它应用a**将75px 0px 0px 0px**填充到所有内容的顶部，以提供前一个``中的空白*/
}

笔记
这就是Tieson T.说的设置定义宽度的方法。它允许您使用
margin:0 auto
，因为它具有定义的宽度


笔记
这是重写四个单独列的内容。既然“最大宽度”已经在前面的
元素中形成，那么可以将其视为“新容器”。它还确定自动确定边距。正如您所知，自动边距意味着边距占用的空间与元素宽度所占用的空间相同。也就是说，页边距已经通过
自动建立，因此此元素中的css是多余的


Boostrap Css
.col-xs-3{
/*这个css类确定了各个定价列的格式。最重要的是，它使用**宽度：25%**因为有4列。它还使用**浮动：左**，以确保所有列保持在一行上*/
}

笔记
通过css类
.col-xs-3
（25%宽度，
float:left
）定义各个定价页的宽度。您可以将其更改为
.col xs-#
，以使宽度适合您。也就是说，我非常相信在这个场景中使用
display:inline block
，而不是
float:left
/
right

研究这个问题的建议
下载GoogleChrome，进入网页，在页面加载后立即按Ctrl+Shift+i