可变长度定价表的内容居中答案

【问题标题】：Centering Content of a Variable Length Pricing Table可变长度定价表的内容居中
【发布时间】：2012-05-10 06:40:13
【问题描述】：

我正在尝试创建一个基本定价表。

表格可以是可变长度的：在某些情况下只有 1 个计划，在其他情况下可能有 5 个计划。

我不知道如何将所有计划集中在一个较大的灰色 div 中。

我正在使用 twitter 引导程序。

这里是 jsfiddle。注意计划是如何向左浮动而不是在灰色区域的中间居中

http://jsfiddle.net/vyjru/

感谢您的帮助！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您可以将定价表项目设置为display:inline-block，然后将.pricing_sequence 容器设置为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;   
}

【讨论】：

谢谢。我仍然希望将白色保持在每个 160。在您提供的链接中，白色似乎伸展开来。我希望两个 160（即 320 像素）位于整个灰色区域的中心，其余的在 320 之外显示为灰色。
@jignesh 我明白你的意思，没有注意到，你可以通过将display:inline-block 的属性应用到ol 来实现这种效果。试试这个：jsfiddle.net/vyjru/2
安德烈斯，你摇滚！非常感谢。
嘿安德烈斯，还有一个问题：jsfiddle.net/vyjru/3 两个定价计划框之间有一个垂直空间。在右侧框的边框开始之前，您可以在第一个框的右侧边缘看到它。我找不到是什么原因造成的。有什么想法吗？
@jignesh 这是由于您的标记中的空白，但可以通过将font-size:0 添加到您的ol 容器然后简单地重置font-size 上的li 来轻松删除他们自己。固定小提琴：jsfiddle.net/vyjru/4