CODEWITHSUNDEEP
htmlemailhtml-tablehtml-email
Naomi
Naomi

Reputation: 1298

Center two lined text in table

I am building an email in HTML and using tables. I want a two lined text where the top line is bold

  <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>

How can I make sure the two lines line up?

Upvotes: 0

Views: 55

Answers (3)

0bero
0bero

Reputation: 1062

[Edit]: Just as Nathan said, this answer would not work for most email clients. The cross-client solution should be using padding-left as he mentioned:

<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>

If your client supports it, you can use 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>

Upvotes: 2

Nathan
Nathan

Reputation: 5259

The use of flexbox is not right--most email clients do not support it: https://www.caniemail.com/search/?s=flex

Just use 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>

Upvotes: 1

chillin
chillin

Reputation: 45

You can use flex-direction: column as https://stackoverflow.com/a/67600433/15963931 said.

If you want to make sure the two lines are line up you can put the text inside a 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>

Remove margin: 0 auto from div if you don't want it aligned to the center.

Upvotes: 0

Related Questions