Trying to use the below for an email signature, but I cannot get the image in the spanned row to remain centered in all email clients - it works in JSBin fine, but it shows uneven when loaded in GMail. What do I need to change to get it showing correctly (centered) in GMail?
https://jsbin.com/yojinow/1/edit?html,output
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table> 5 Answers
Answers 1
The image must have display: block property to be able to have the 100% height
Try to replace display: inline-block; from the image to display: block;
And look at this example
#TemplateLogo{ display: block; margin-left: auto; margin-right: auto; vertical-align: baseline; } #TemplateLogo2{ display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline; } tbody{ display:block; border: 1px solid red; } h3{ font-family: Arial; }<h3>With display: block;</h3> <table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table> <h3>With display: inline-block;</h3> <table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table>Answers 2
Please use css:
height: auto; // On the <td rowspan="4"...> and on the image:
display: block; height: 70px; .
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: auto; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: block; height: 70px; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table> Answers 3
Change image height value to auto.
<img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="auto" width="100%"> this may works fine.
Thanks.
Answers 4
You're specifying 4 columns with 18px each, but the column where the image dwells you're specifying 70px. It should be 72px (18px x 4 = 72px) (column and image). You may need to change the text to baseline if you want to align them on the baseline.
<table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 72px; height: 72px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" style="display: inline-block; margin-left: auto; margin-right: auto; vertical-align: baseline;" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table> Answers 5
One of my favorite CSS properties for aligning things is transform because it is quick and easy. If you are looking for this to be viewable on mobile devices, I suggest you not use px but em or something like that.
table{ border: 1px solid red; } img { transform: translateY(0.15em); }<h3>With display: block;</h3> <table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table> <h3>With display: inline-block;</h3> <table cellspacing="0" cellpadding="0" border="0" style="width: 390px; height: 70px; table-layout: fixed;"> <tbody> <tr> <td rowspan="4" style="width: 70px; height: 70px; padding-right: 0px; overflow: auto;" vertical-align:"middle" valign="middle"> <a href="http://google.com.au"><img id="TemplateLogo2" data-class="external" src="https://dummyimage.com/70.png" alt="Company Name" height="100%" width="100%"></a> </td> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-weight: bold; font-family: Arial; font-size: 12pt; color: rgb(81, 81, 81);"> John Doe </font> </td> </tr> <tr> <td style="padding-bottom: 0px; vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="font-family: Arial; font-size: 10pt; color: rgb(81, 81, 81);"> Accounts </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> T: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> | F: <a href="tel:+6199999999" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">(02) 4399 9999</a> </font> </td> </tr> <tr> <td style="vertical-align: middle; padding-left: 10px; width: 264px; height: 18px;"> <font style="color: #515151; font-size: 10pt; font-family: Arial"> E: <a href="mailto:example@example.com.au" style="color: #7cc0cb; text-decoration: none; border-bottom: 0px solid #7cc0cb;">example@example.com.au</a> </font> </td> </tr> </tbody> </table>
0 comments:
Post a Comment