Search code examples
htmlhtml-tablehtml-email

Trying to Center Table Cell button - HTML EMAIL

Please see Pastebin, I'm trying to center the "BUILD FOR FREE NOW" button, but for some reason align="center" is not working. What Am I doing wrong?

My Code Was Long ..
So I put it here : Pastebin

Here's the portion of the code (my button) that I need centered:

<tr>
    <td align="center" width="240" bgcolor="#cf142b" style="background: #cf142b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; font-weight: bold; text-decoration: none; display: block;"><a href="" style="display:block;color: #fff; text-decoration: none; padding:15px 10px 15px 10px;">BUILD FOR FREE NOW</a>
    </td>
</tr>
Solution

  • You have to move those style attributes from your to your tag.

    <body style="margin: 0; padding: 0; background-color: #f5f5f5; font-family: Verdana, Geneva, sans-serif;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:40px 0 0 0;">
        <tr>
            <td>
                <table align="center" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="border:1px solid #CCCCCC;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;">
                    <tr>
                        <td align="center" style="border-bottom:1px solid #CCCCCC;"> <a href="#"><img src="img/logo-header.png" alt="Welcome" style="display: block; width:100%; height:auto;" /></a>

                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 30px 20px 30px 20px;">
                            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="font-size:16px;color:#666666;">
                                <tr>
                                    <td> <b>Hello, Mike!</b>

                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 20px 0 20px 0;">Lorem ipsum dolor sit amet!</td>
                                </tr>
                                <tr>
                                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.</td>
                                </tr>
                                <tr>
                                    <td style="color:#444444;padding: 20px 0 20px 0;"> <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit!</b>

                                    </td>
                                </tr>
                                <tr>
                                    <td align="center"><a href="" style="width:240px; background: #cf142b; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; font-weight: bold; text-decoration: none; display: block; padding:15px 10px 15px 10px;">BUILD FOR FREE NOW</a>

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>Call to Action</td>
                    </tr>
                    <tr bgcolor="#0B5EA8">
                        <td>Footer</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

    fiddle: http://jsfiddle.net/cCeNd/

    Let me know if its the one you looking for.