尝试居中表格单元格按钮 - HTML EMAIL [关闭]

问题描述 投票：0回答：2

请查看 Pastebin，我正在尝试将“立即免费构建”按钮居中，但由于某种原因

align="center"
无法正常工作。我做错了什么？

我的代码很长..
所以我把它放在这里：Pastebin

这是我需要居中的代码部分（我的按钮）：

<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>
html html-table html-email
2个回答
3
投票

您必须将这些样式属性从您的标签移到您的标签中。

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

小提琴：http://jsfiddle.net/cCeNd/

如果是您要找的人，请告诉我。

2
投票

编辑：我将错误的元素居中。

你试过了吗

margin: 0 auto;
？那可能不是跨客户端的，但您的圆角也不会。

另一种选择是制作一个 3 格表格来假装按钮居中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.