我有以下 HTML 和 CSS - http://jsfiddle.net/64vUR/
相关 CSS
.content {
position: absolute;
max-width: 960px;
min-width: 200px;
margin: 0 auto;
left: 0;
right: 0;
}
我需要让三列水平居中,尽管我尽了最大努力包括查看本网站上的其他类似问题,但我还是无法弄清楚。有人可以帮忙吗?谢谢
最佳答案
移除
.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;
}
关于html - 我如何使这个 div 元素居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23024042/