CODEWITHSUNDEEP
htmlcssoutlook
ithil
ithil

Reputation: 1758

Button line-height issues on Outlook

I have made a button for a newsletter using http://buttons.cm/

Although it is supposed to display properly on Outlook, the text is not vertically centered but instead is aligned slightly to the bottom.

Button's original code: 

<td align="center" width="70%">      
<div><!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9">
        <w:anchorlock/>
        <center>
      <![endif]-->
          <a href="http://"
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a>
      <!--[if mso]>
        </center>
      </v:roundrect>
    <![endif]--></div>
</td>

How it's supposed to look (and how is looking on Mail, for example):

button how I would expect to look

How it's looking on Outlook:

button on Outlook

I have tried changing the height and line-height values to ems or % instead of pixels, adding the mso-line-height-rule:exactly property, adding the line-height to the td instead of to the a tag... no luck!

Upvotes: 0

Views: 2583

Answers (3)

Aleko
Aleko

Reputation: 970

mso-text-raise style will help you to achieve proper vertical align

Upvotes: 0

Gortonington
Gortonington

Reputation: 3587

This is the closest I can get it through VML in email to make Outlook listen. It is not perfectly vertical center, but is close.

I changed the VML to include the text and link of the button inside the roundrect tag inside the VML instead of using the a tag for both. This allows better compatability with Outlook because it is utilizing VML (a microsoft language) instead of HTML that would require Word to rewrite/translate it. This combined with a couple small tweaks (e.g. set a defined width) produced the closest to vertical align I could get. VML offers many stylings and other options, but not all translate into Email/Outlook, so keep this in mind if you research into VML. :

Outlook Button

<td align="center" width="70%">      
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t">
    <v:fill type="tile" color="#0072b9" />
    <w:anchorlock/>
    <center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center>
  </v:roundrect>
      <![endif]-->
          <a href="http://"
    style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a>
</div>
</td>

Upvotes: 1

Simon Merrick
Simon Merrick

Reputation: 762

According to W3Schools the align attribute defines the horizontal and not vertrical alignment of content in a cell.

W3Schools specifies that the vertical alignment of the content in a cell can be defined using the valign attribute

<td align="center" valign="middle" width="70%">

Alternatively you can use the vertical-align css attribute defined as an inline style to vertically center an element in its parent container.

You may need to use one or the other or both of the above methods depending on the mail client(s) you are targeting. It pays to check which mail clients support which elements, there are plenty of references online, heres one, you may be able to find better.

Upvotes: 0

Related Questions