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>

Answer 2

不能说我同意所选择的关于增加宽度的答案。您的问题是内联块属性。它会影响表子元素的所有用户代理默认值。简单地说，将float：inline-block替换为float：left，你可以得到相同的结果，其他所有css都会被放置到位。（文本对齐，例如）

.navInline {
float:left;
vertical-align:top;
text-align: center !important;

}

这是应用新风格的小提琴。

http://jsfiddle.net/bdTUz/

但重要...... 您的问题表明您正在制作电子邮件模板。课程可能无效。我从制作基于HTML的电子邮件中了解到的，最佳做法是添加内联样式。

此链接可能非常有用 http://htmlemailboilerplate.com/

Answer 3

我能够使用列表解决您的问题而不使用任何DIV。它更清洁。可以找到工作代码in this JSFiddle：

HTML

  <ul class="navInline">
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  </ul>

CSS

    .navInline li {
    display:inline-block;
    list-style:none;
    border: 1px solid #333;
    padding: 5px;
    background-color: yellow;

}

text-align center在内联块html表中不起作用

3 个答案: