How to use in-line CSS to align a button centre on mobile?

user_14506914 0
Viewed 162

I've got a button in an email that I'm trying to align centre on mobile.

I planned on using media queries to do this e.g.

@media only screen and (max-width: 390px) {
.button-center {}

But I'm unsure whether I can even target the 'align' part of the code in this way.

<tr>
  <td><table class="button-center" align="left" cellpadding="0" cellspacing="0">
    <tr>
      <th bgcolor="#000000" style="border-radius: 30px; line-height: 100%; mso-padding-alt: 5px 30px 10px;"> <a href="https://" target="_blank" style="font-family: Helvetica, Arial, sans-serif; color: #FFFFFF; display: block; font-size: 16px; line-height: 26px; padding: 14px 36px; text-decoration: none;">Read now</a></th>
    </tr>
  </table></td>
</tr>
html-email css html
1 Answers

The equivalent of the HTML align attribute in CSS can be one of two things:

  • margin:0 auto if you use align="center"
  • float:left or float:right if you use align="left" or align="right"

In your case, on mobile, you will need to both cancel the float effect created by the align="left" in your HTML with a float:none; and set the table to margin:0 auto to center it. In the end, your style would look something like this:

@media only screen and (max-width: 390px) {
.button-center { float:none; margin:0 auto; }
}
user_134634210
Related