table 中的两行文本居中

Question

我正在 HTML 中构建电子邮件并使用表格。我想要一个两行文本，其中顶行是粗体

  <table style="width:100%"><tr >
    <td style="background-color:#000000;color:#fff;font-family:arial;display:flex;justify-content:center;align-text:center">
      <b>48 HOURS ONLY! </b>
      <br>EXTRA 15% OFF YOUR NEXT ORDER | CODE: B15CX
    </td>
    
  </tr>
  </table>

如何确保两条线对齐？

Answer 1

[编辑]：，此答案不适用于大多数电子邮件客户端。正如他提到的那样，跨客户端解决方案应该使用 padding-left：

<table style="width:100%"><tr >
    <td style="background-color:#000000;color:#fff;font-family:arial;padding-left:50px;">
      <b>48 HOURS ONLY! </b>
      <br>
      EXTRA 15% OFF YOUR NEXT ORDER | CODE: B15CX
    </td>
    
  </tr>
  </table>

如果您的客户端支持，您可以使用flex-direction: column:

<table style="width:100%"><tr >
    <td style="background-color:#000000;color:#fff;font-family:arial;display:flex;justify-content:center;flex-direction:column;align-text:center">
      <b>48 HOURS ONLY! </b>
      <br>
      EXTRA 15% OFF YOUR NEXT ORDER | CODE: B15CX
    </td>
    
  </tr>
  </table>

Answer 2

你可以像说的那样使用flex-direction: column。

如果要确保两行对齐，可以将文本放在 div:

中

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table style="width:100%"><tr >
    <td style="background-color:#000000;color:#fff;font-family:arial;display:flex;justify-content:center;align-text:center">
      <div style="margin: 0 auto;">
        <b>48 HOURS ONLY! </b>
        <br>EXTRA 15% OFF YOUR NEXT ORDER | CODE: B15CX
          </div>
    </td>
    
    </tr>
  </table>
</body>
</html>

如果您不希望它与中心对齐，请从 div 中删除 margin: 0 auto。

Answer 3

flexbox 的使用不正确--大多数电子邮件客户端不支持它：https://www.caniemail.com/search/?s=flex

只需使用padding-left:

<table style="width:100%"><tr >
    <td style="background-color:#000000;color:#fff;font-family:arial;padding-left:50px;">
      <b>48 HOURS ONLY! </b>
      <br>EXTRA 15% OFF YOUR NEXT ORDER | CODE: B15CX
    </td>
    
  </tr>
  </table>

table 中的两行文本居中

Center two lined text in table

html

email

html-table

html-email