Adding image in table spanned table row to stay centered relative to other non-spanned rows
Clash Royale CLAN TAG#URR8PPP
Adding image in table spanned table row to stay centered relative to other non-spanned rows
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>
@Saeed I have updated the question to show where - please see the yellow highlighted rectangle
– Matthew Malone
Aug 6 at 9:28
@Matthew Malone, Check my answer.. if not works , send me your result.
– VSM
Aug 6 at 10:40
Im sorry, but even with your marks i dont know what you are asking for.
– Pilan
Aug 6 at 12:01
@Matthew Malone, my answer works for you..try it.
– VSM
Aug 7 at 4:43
6 Answers
6
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
display: block
display: inline-block;
display: block;
#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>
Still gave the same problem
– Matthew Malone
Aug 6 at 12:58
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>
Still has the same problem when viewed on Gmail
– Matthew Malone
Aug 7 at 10:26
Change image height value to auto.
height
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.
Made it better, but image is still not centred vertically
– Matthew Malone
Aug 6 at 12:59
@Matthew Malone, update image styles . I have updated my answer...Try it
– VSM
Aug 7 at 5:27
That works better, but it explodes when viewed on mobile...
– Matthew Malone
Aug 7 at 10:24
@MatthewMalone, since CSS media queries are not fully support for email templates, this kind of issues raised.So you need to adjust font & image sizes as they are match mobile devices as well...Have a look at this.I have made small adjustments. jsfiddle.net/Sampath_Madhuranga/20p8eobx/2
– VSM
Aug 7 at 11:47
@MatthewMalone, Is above jsfiddle working for you ?
– VSM
Aug 7 at 12:21
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>
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.
transform
px
em
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>
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>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
What do you mean by uneven? Could you please give a screenshot of it when it is uncentered?
– Saeed
Aug 6 at 7:48