Menu
<table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="20"> <img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12"></td> <td valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td> </tr> </tbody> </table> I have the above code in Outlook. It displays fine but in Gmail, Yahoo and Hotmail, the bullets and text do not align vertically on top, it seems like there is padding round the top of the text. Any ideas?
761
Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.
To center an image using text-align: center; you must place the <img> inside of a block-level element such as a div . Since the text-align property only applies to block-level elements, you place text-align: center; on the wrapping block-level element to achieve a horizontally centered <img> .
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
Long story short, in the testing that I've been doing this afternoon it looks like outlook supports the valign property on td elements but gmail and the rest want the vertical-align css rule. Gmail only supports inline styles, not style tags, so you have to do something like this:
<table> <tr> <td valign="top" style="vertical-align:top;"></td> </tr> </table> Also make sure you declare a doctype! Make sure this is above your <html> element:
<!DOCTYPE html> Use this code
<table cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td width="20" align="left" valign="top"> <img height="12" alt="" src="/CmpImg/2010/22677/924228_immunotec_bullet.gif" width="12" align="top"></td> <td align="left" valign="top"><span style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; COLOR: rgb(0,0,0); LINE-HEIGHT: 16px; PADDING-TOP: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left">Reliable service team, deployed to your location, at your convenience</span></td> </tr> </tbody> </table> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
