文本对齐中心在行内块 html 表中不起作用

Question

我正在制作 HTML 电子邮件并决定为每个导航元素使用表格。我需要内联显示表格。我使用了 display:inline-block; 在创建所需结果的表格上， 但是表格内的 TEXT 不会对齐。我已经放置了 text-align: center; 在表中，td 和一个标签，但它没有工作。

我知道该方法适用于 div，但我找不到表格的解决方案。

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="right" valign="top">

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 1
     </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center" style="text-align:center;"> <a href="#" style="text-decoration: none; color: #005E82;">
     option 2
                    </a>

                </td>
            </tr>
        </table>

        <table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#" style="text-decoration: none; color: #005E82; text-align:center;">
     option 3
     </a>

                </td>
            </tr>
        </table>
    </td>
</tr>

CSS

.navInline {
display:inline-block;
vertical-align:top;
text-align: center !important; }

这是不工作的代码

http://jsfiddle.net/nathanaric/pf35h/9/

Answer 1

您需要width在表格单元格上设置一个属性。

例子：

<table class="navInline" width="130" height="35" border="0" cellspacing="0" cellpadding="0" bgcolor="#999966" style="text-align:center;">
  <tr>
    <td align="center" width="130"><a href="#" style="text-decoration: none; color: #005E82;">option 1</a></td>
  </tr>