文本对齐中心在 inline-block html 表中不起作用答案

【问题标题】：text-align center is not working inside inline-block html table文本对齐中心在 inline-block html 表中不起作用
【发布时间】：2014-04-09 17:51:00
【问题描述】：

我正在制作 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/

【问题讨论】：

标签： html html-email css

【解决方案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>

【讨论】：

【解决方案2】：

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

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

}

这是一个应用新样式的小提琴。

http://jsfiddle.net/bdTUz/

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

这个链接可能很有帮助 http://htmlemailboilerplate.com/

【讨论】：

浮动元素确实有效，但浮动在 Outlook 中处理不好电子邮件 (campaignmonitor.com/css)
欣赏有用的链接

【解决方案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;

}

【讨论】：