如何在TR中居中TD？

Question

我正在处理HTML邮件，尝试将白色TR中的绿色TD居中，使绿色框左右各有20像素的白色边距。

我尝试通过设置绿色部分的TD宽度并将margin设置为0 auto，但绿色部分会扩展到TR的宽度。

我尝试添加两个额外的TD将绿色TD推向中心，但也没有奏效。

包含代码片段，在具有#a6d971的TR上遇到问题。

<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
    <tbody>
        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
            </td>
        </tr>
        <tr bgcolor="#fff" height="75">
            <td valign="top" style="text-align:center;">
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
                    Regular sales happen every day
                </p>
                <p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
                    9am - 11pm
                </p>
            </td>
        </tr>


        <tr bgcolor="#fff" height="75" padding="10">
            <td bgcolor="#000" width="20"></td>
            <td bgcolor="#a6d971" width="300" style="margin: 10;">
            </td>
            <td bgcolor="#000" width="20"></td>
        </tr>



        <tr bgcolor="#fff">
            <td valign="top">
                <table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
                    <tbody>
                        <tr>
                            <td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
                                <h3>Nine @ Nine</h3>
                                <p>Fuel up! Dresses, tunics and other items including:</p>
                            </td>
                        </tr>




                        <tr>

                        </tr>

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


        <tr>
            <td style="margin: 0 auto;">
                <img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
            </td>
        </tr>
    </tbody>
</table>

- grace

---

电子邮件客户端在处理 CSS 时存在许多问题...但是，当您只想居中一个框并设置一些颜色时，它们通常表现得相当不错。不要滥用表格来实现这一点。 - Quentin

你有图片可以说明吗？ - Sergio Tulentsev

你使用表格的原因是什么？ - Purag

@Purmou，尽管让我很痛苦，但表格和内联CSS仍然是开发电子邮件的最佳方式。 =/ - Ayman Safadi

是的，这就是为什么我不得不使用表格的原因：\ - grace

Answer 1

使用DIV和CSS，大多数电子邮件客户端都支持样式，您可以在TD元素内部使用DIV，这样很容易居中或进行其他所需的操作。

例如：

<tr style="background-color: white;">
  <td  style="background-color: green;">
    <div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
  </td>
</tr>

此外，请注意，如果您使用DIV，则还可以避免使用表格。

- Carlos Quijano

---

太棒了，谢谢！这个完美地解决了问题。我本以为我试过这个方法，但每次尝试时都会弄乱其他内容。 - grace

顺便说一句，我不知道现在可以在电子邮件客户端中使用DIV和CSS。上次我查看时，这是不被推荐的。谢谢。 - grace

Grace是正确的，由于电子邮件客户端的向后兼容性，到2018年仍不建议使用。像MailChimp这样的专业批量邮件发送者从不使用它们。 - Amicable

Answer 2

在一个黑客的基础上再进行黑客攻击。

<table width="100%" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
                This is stuff.
            </td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/zy6GU/

顺便提一下，同样的方法也适用于 DIV 元素：

<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>

http://jsfiddle.net/zy6GU/1/

- Jared Farrish

---

太棒了，谢谢！这个完美地解决了问题。我本以为我试过这个方法，但每次尝试时都会弄乱其他内容。 - grace

Answer 3

如果你必须使用表格，那么也可以适当地滥用它们:

<table><tr align="center">
    <td width="50%">one</td>
    <td style="background-color:green">two</td>
    <td width="50%">three</td>
</tr></table>

http://jsfiddle.net/mblase75/yntfu/

- Blazemonger

---

那种滥用是否包括使用已弃用且现在不再受支持（在HTML5中）的属性？ - animuson

Answer 4

我不是CSS专家，但这对我有效（没有额外的标签）：

<table>
  <tr style="background-color: white; border: 1px solid black;">
    <td style="background-color: green; display: block; margin: 0 20px;">
      <!-- Content -->
    </td>
  </tr>
</table>

- tomferon

Answer 5

你所说的“for emails”是什么？你指的是电子邮件地址，比如Email Me吗？如果是这样，你需要一些CSS将链接居中于TD中，或与TD的colspan组合使用。

- Todd Baur