Centering button in email notification

Question

I'm trying to center a button in the Shopify Email Notification. Tried a few different ways but none were successful.

So far the modified code below works in preview, but not in the test email.

Any idea? Thanks so much!!

.button__cell { 
    position: relative; 
    display: inline-block; 
    left: 50%; 
    transform: translateX(-50%); 
    text-align=center; background: {{ shop.email_accent_color }}; 
}

<td class="button__cell"><a href="{{ gift_card.url }}" class="button__text">View Gift Card</a></td>

Answer 1

text-align=center; should be text-align:center;

You could try margins (which has greater Compatibility) over left See Compatibility (and transform See Compatibility).

margin: 0px auto;

Both of these properties (left and transform) lack universal support across the various Email Programs available today (transform is not supported by ANY email program except for AOL or Android).

I would suggest using TABLES to properly center your content, you'll have greater compatibility across every E-mail application.

HTML

<td class="button__cell">
    <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <a href="{{ gift_card.url }}" class="button__text">View Gift Card</a>
            </td>
        </tr>
    </table>
</td>

_{(source: What's the best way to center your HTML ...)}

CSS

td.button__cell > table {
    margin: 0px auto;
    border-collapse: collapse;
    border: none;
}

td.button__cell > table > tr {
    border: none;
}

td.button__cell > table > tr > td {
    text-align: center;
    border: none;
}

The CSS3 should remove the borders predefined by browsers and center align the text.