html - 我如何使这个 div 元素居中？

Question

我有以下 HTML 和 CSS - http://jsfiddle.net/64vUR/

相关 CSS

 .content {
    position: absolute;
  max-width: 960px;
  min-width: 200px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

我需要让三列水平居中，尽管我尽了最大努力包括查看本网站上的其他类似问题，但我还是无法弄清楚。有人可以帮忙吗？谢谢

Answer 1

Demo

移除

.pricing-table {
    float: left;
}

并添加

.content {
    text-align: center;
}
.pricing-table {
    display: inline-block;
}

---

inline-block 的问题是 HTML 中的空格分隔元素，所以即使有 width: 48.9% 你也不会有两个元素并排，因为那个额外的空间。

您可以通过 html 注释换行和缩进来解决这个问题，或者将 font-size: 0 设置为父级并将其重置为每一列。

在你的例子中，因为你已经有一个自定义的font-size，你可以使用

.content {
    text-align: center;
    font-size: 0;
}
.pricing-table {
    display: inline-block;
} 

Demo