Question

我有一个表格，其中一列的内容通常比列本身的内容窄。我希望此列的内容如此居中：

-----------------
| Column Header |
-----------------
|    Content    |
|    Content    |
|    Content    |
-----------------

快速搜索提出了将内容置于div style="diplay:table; margin:auto"的解决方案，但这在IE6 / 7中不起作用，因为它们无法将table识别为显示模式。我宁愿避免明确设置width，因为内容的大小可能会有所不同。

在IE6 / 7中是否存在以相同方式进行此类显示的黑客攻击？或者，是否有一种不同的方法适用于IE6 / 7和所有主流浏览器？

编辑：我无法使用text-align:center;，因为内容不是纯文字。

编辑2：以下是jsFiddle中的简单示例：http://jsfiddle.net/KK5Bp/。该按钮显示在理智浏览器中的标题下方，但在IE6 / 7中仍然保持对齐。我希望它在IE6 / 7中的显示方式也一样。

Answer 1

您是否在相关表格单元格内的text-align: center上尝试了<div>？

<table>
    <thead>
        <tr>
            <th>Very Long Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div style="text-align: center">
                    <button name="short">short</button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

text-align:center应该在每个浏览器中都一样。

http://jsfiddle.net/ambiguous/NYYwd/

Answer 2

你试过保证金：0px auto？试一试，看看它是怎么回事。

使用IE6 / 7中的CSS在表列中居中内容

2 个答案: