如果您转到价格部分，您会看到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>
答案 0 :(得分：0)
自动左/右边距仅适用于宽度不是auto的元素（对于大多数元素的默认值）。
ul.tables {
width: 65%; /* make this whatever works */
margin: 70px auto 0;
}
修改
值得注意的是，既然您正在为col-元素使用Bootstrap <li>类，那么您可以免费获得中心CSS＆＃34;＆＃34;只需将row类应用于ul.tables元素：
<ul class="row tables">
<!-- ... -->
</ul>
答案 1 :(得分：0)
使用此css
ul.tables
{
width: 75%;
margin: 0 auto;
}
并将您的li class col-xs-3替换为col-xs-4
答案 2 :(得分：0)
JSFiddle：http://jsfiddle.net/g9CXt/
如果您想真正了解其工作原理，请让我一步一步地告诉您出错的地方，您如何推理事物，以及您尝试使用的定价表上的实际工作方式。
为此，我们需要强调定义此表结构的四个主要内容。
1) <li class="col-xs-3 pricing-table relative animated fadeIn visible" data-animation="fadeIn" data-animation-delay="300">
2) <ul class="tables">
3) <div class="inner prices">
4) <section id="prices" class="container">
这四个元素中的CSS是创建整个部分结构的原因。
让我们从最大的元素开始，然后逐步向最具体的元素发展。
<部分> .container {这个css类给出了整个部分＆＃39;容器＆＃39;只要介质屏幕高于1200px，就可以达到100％的宽度。不太重要的是，它将边距和填充设置为0px。}
<部分>元素
无
这就是我们所说的容器。它设置宽度为100％（任何浏览器大小）。它包含了本节的内容。
< div > 无值得注意
.inner {此css类是一个未包含在引导程序中的自定义类。这有四个主要的样式属性，有助于定义整个结构。它建立了一个最大宽度：1170px ，它集中了所有元素＆＃39;带有 margin：0 auto 的1170pxs，它将此div下所有子项的文本与 text-align：center 对齐，最后它应用aa 填充：75px 0px 0px 0px 到所有内容的顶部，以提供上一个<部分>}
这就是Tieson T.所说的定义宽度。它允许你使用margin：0 auto因为它有一个定义的宽度。
< ul > 这是重写四个单独列的内容。把它想象成一个新的容器＆＃39;现在，＆＃39; max-width＆＃39;已在我们之前的< div >元素中形成。它还确定了边距是自动确定的。你知道，自动边距意味着边距占据了元素宽度尚未占用的空间。也就是说，边距已经自动建立，因此这个元素中的css相当多余。
< li > .col-xs-3 {此css类确定如何格式化各个定价列。最重要的是，这使用宽度：25％，因为有4列。它还使用 float：left 以确保所有列都保持在一行。}
通过css类.col-xs-3（25％宽度，浮点数：左）定义各个定价页面的宽度。您可以将其更改为.col-xs-＃以使宽度适合您。也就是说，我非常相信使用display：inline-block for this scenario and not float：left / right。
下载谷歌浏览器，在页面加载后立即转到网页http://oxygen.goldeyestheme.com/oxygen/press，Ctrl + Shift + i，按放大镜，然后将鼠标图标悬停在价格列上，直到整个事情变为蓝色，你可以从那里探索。