html - 如何在没有表格的情况下实现表格的居中功能

Question

对我来说，table 最有用的功能之一是它们的宽度会根据其内容进行调整。

您可以非常轻松地执行以下操作:

<table align=center style="border: 1px solid black">
<tr><td style="padding: 20px">
some text here
</table>

如果那个盒子的内容更宽，那么盒子就会更宽。非常直观，适用于所有浏览器。

您可以使用 float CSS 属性为普通 block 元素实现类似的效果，即它们的宽度会根据其内容进行调整。但是元素不会居中。

那么，问题来了:如何将 block 元素居中并使该元素以跨浏览器的方式根据其内容调整宽度？

Answer 1

现代方法是指定 display:table，IE 的解决方法是在 inline/inline-block 上有一个父元素和 text-align:center:

<div id="for-ie">
<div id="el">whatup son</div>
</div>

<style>
#el { 
display:table;
margin:0 auto;
}

/* for IE, throw this in a CC */
#for-ie { text-align:center; }
#el { 
zoom:1;
display:inline;
}
</style>

Demo

这是我写的关于这个主题的快速教程:http://work.arounds.org/centering-block-level-element-variable-width/

我不困的时候会加长。