Question

请参阅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>

Answer 1

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



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

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

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

让我知道它是否是你要找的那个。

Answer 2

编辑：我把错误的元素集中在一起。

你试过margin: 0 auto;吗？这可能不是跨客户端，但你的圆角也不会。

另一种选择是制作一个3个细胞的桌子来伪造按钮。

尝试中心表单元格按钮 - HTML EMAIL

2 个答案: