align button html emails
Question
i'm creating a very basic html email layout, an one column layout: this is the layout skeleton:
<html>
<head>
<body>
<table class="outer">
<tr> <!-- structure of a single row-->
<td class="one column">
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr> <!--END of a row-->
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
</body>
</head>
</html>
in one row i have a button, its width is 100%:
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td align="center" bgcolor="#cc9435" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;" ><a href="#" target="_blank" style="font-size:16px;font-family:sans-serif, Helvetica, Arial;color:#ffffff;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:12px;padding-bottom:12px;padding-right:18px;padding-left:18px;border-width:1px;border-style:solid;border-color:#cc9435;display:inline-block;" >button</a></td>
</tr>
<tr>
<td class="spacer">
</td>
</tr>
</table>
</td>
</tr>
css:
/* One column layout */
.one-column .contents {
text-align: center;
}
.one-column p {
Margin-bottom: 10px;
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background-color: #ffffff
}
the button cover the entire width of the template, how can i make it smaller and centered? with on td in a row seems not quite possible, i try with setting margin but obviously doesnt work thanks
2 answers
solution1
1 ACCPTED 2017-10-05 18:04:31
The issues I found in the code are.
There is no need to capitalize CSS classes. Not an issue but just stating!
Since you are setting the
background-colorfor thetdelement (bgcolor="#cc9435"), it seemed like the button was taking the full width of the table. I moved the background to theatag alone using thebackground-colorCSS property.I have reduced the padding property to one line
padding:12px 18pxwhere 12px is for the top and bottom padding and 18px is for the left and right padding, you need to increase the left and right padding to see and increase in the width of the button.
Let me know if this fixes your issue!
.td-style { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding-top: 0; padding-bottom: 0; padding-right: 0; padding-left: 0px; } .a-style { font-size: 16px; font-family: sans-serif, Helvetica, Arial; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border-style: solid; border-color: #cc9435; display: inline-block; background-color: #cc9435; } .one-column .contents { text-align: center; } .one-column p { margin-bottom: 10px; } .outer { margin: 0 auto; width: 100%; max-width: 600px; background-color: #ffffff }
<html> <head> <body> <table class="outer"> <tr> <!-- structure of a single row--> <td class="one column"> <table> <tr> <td> </td> </tr> </table> </td> </tr> <!--END of a row--> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <tr> <td class="one-column"> <table width="100%"> <tr> <td align="center" style="td-style"> <a href="#" target="_blank" class="a-style">button</a> </td> </tr> <tr> <td class="spacer"> </td> </tr> </table> </td> </tr> </table> </body> </head> </html>
solution2
0 2017-10-05 18:05:44
Add width and bg color only to a tag
<td align="center" style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0px;"><a href="#" target="_blank" style="font-size:16px;font-family:sans-serif, Helvetica, Arial;color:#ffffff;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding-top:12px;padding-bottom:12px;padding-right:18px;padding-left:18px;border-width:1px;border-style:solid;border-color:#cc9435;display:inline-block; width: 159px; background: #CC9434;">button</a></td>
Before update
After Update
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.