I want to middle align the following - how can I do that:
<div class="container-fluid" style="height:100%">
<table id="PulseTable" class="display2" style="height:100%">
<tbody id="PulseBody" style="height:100%"><tr class="pulseheader">
<td class="pulseheader" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold;">Manager</td>
</tr>
<tr class="pulseline" style="height: 20px;">
<td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td>
<td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td>
<td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td>
</tr>
<tbody>
</table>
</div>
To center them horizontally within each table cell, use:
text-align: center;
To center them vertically (this only works with tables, or elements with display: table-cell):
vertical-align: middle;
Apply these styles to the <td> element.
<table>
<tr>
<td style="text-align: center; vertical-align: middle;">
Foo bar
</td>
</tr>
</table>
I hope it works for you
.container-fluid{
position:relative;
margin: 0px auto;
}
You need to use COLSPAN to merge the cell in the first line and also use CSS style "text-align: center" to align it do center:
<div class="container-fluid" style="height:100%">
<table id="PulseTable" class="display2" style="height:100%">
<tbody id="PulseBody" style="height:100%"><tr class="pulseheader">
<td class="pulseheader" colspan="3" style="padding-top: 10px; padding-bottom: 10px; font-size: 16px; font-weight: bold; text-align: center">Manager</td>
</tr>
<tr class="pulseline" style="height: 20px;">
<td class="pulseline" style="padding-left: 40px; font-size: 12px; font-style: normal;">Header</td>
<td class="pulseline" style="padding-left: 20px; font-size: 12px; font-style: normal;">New York II</td>
<td class="NONE" style="padding-left: 20px;"><img src="http://blog.sckyzo.com/wp-content/google-small.png" style="height: 30px; width: auto;"></td>
</tr>
<tbody>
</table>
</div>
Related
I'm currently making an email layout with tables, and what I need is being able to put picture above the text in some particular screen sizes
Here's the example of my code:
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0; padding: 50px 20px 10px;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
So the issue is the picture has to be on one line with the text when looking at it from a computer screen and go above/below the text when checking it from mobile mailing client
My favourite technique is to use table header cells () and display block them on mobile. The same can be done in most email clients with but there are a few mobile email clients which don't allow it and so your layout won't stack as expected.
Just a couple of notes on your code:
I noticed the use of valign="centre" on the two cells. For valign, the correct value is middle. Centre is used for the align attribute. So just switch those around.
You've used a lot of negative margin in your code. While it isn't the end of the world, I would imagine a fair amount of issues in testing. I would correct the valign value first, then play with padding on the table cells to try and get the layout you're looking for. Also play with line height if you're seeing issues. Negative margin values could cause more harm than good further down the line.
I've coded a couple of examples for you, incorporating my notes above:
Current - your code as posted
Stacked table header cells - basic stacking cells example
Reverse stacked table header cells - point 2 but reversed, as you requested
Codepen - https://codepen.io/Digital_Frankenstein/pen/WNObXzb
Code:
#media only screen and (max-width:460px) {
.device-width { width:100%!important; padding:0; min-width:100%!important; }
.device-width-padding { width:85%!important; padding:0; min-width:85%!important; }
.th-block { display:block; width:100%!important; }
.th-block-reverse-header { display:table-header-group; width:100%!important; }
.th-block-reverse-footer { display:table-footer-group; width:100%!important; }
}
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid red;" role="presentation">
<tr>
<td style="font-weight:600; color:red; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Current
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<td valign="center" style="text-align:left;">
<h1 style="margin-top: -30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top: -10px; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</td>
<td valign="center" style="text-align:left;">
<img style="margin-right: 10px; margin-top: -50px;" src="https://via.placeholder.com/300.jpg" alt="">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid green;" role="presentation">
<tr>
<td style="font-weight:600; color:green; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block" valign="middle" style="text-align:left;">
<img style="margin-right: 10px;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" class="device-width-padding" style="border:1px solid blue;" role="presentation">
<tr>
<td style="font-weight:600; color:blue; font-size:20px; padding:10px 0 5px 0; text-align:left;">
Reverse stacked table header cells
</td>
</tr>
<tr>
<td align="center" style="padding: 50px 20px 10px;">
<table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;">
<tr>
<th class="th-block-reverse-footer" valign="middle" style="text-align:left;">
<h1 style="margin-top:0; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 700">my text</h1>
<h1 style="margin-top:0; margin-bottom: 30px; margin-left: 10px; font-family: 'Trebuchet MS', sans-serif; font-size: 16px; color: #404040; line-height: 1.4; font-weight: 400">my text</h1>
</th>
<th class="th-block-reverse-header" valign="middle" style="text-align:left;">
<img style="margin-right: 10px; margin-top:0;" src="https://via.placeholder.com/300.jpg" alt="">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm creating an email signature using CodeTwo Email signature from Office 365. It's nearly done, but I keep having issues with a horizontal line that's in the signature. I've tried multiple variations of CSS style elements to get it to work everywhere, but as of now, it shows up on mobile devices, but not desktop devices (it shows up as like an outline of the line on desktop). For the longest time, it worked on desktop but not mobile, but then when I changed something it flipped. I'm using an hr element for the line. Here's a segment of the code:
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="BORDER-TOP: 0px; HEIGHT: 3px; BORDER-RIGHT: 0px; WIDTH: 80%; BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left>
</TD></TR>
Does anyone know what combination of stylings I would need in my hr tag? Thanks
Instead of the <hr> try using a <div> with a border-bottom of the required size:
<div style="border-bottom: 3px solid #213e64;"></div>
Example
<table style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<tbody>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64" vAlign=top>
<strong>{First name} {Last name}</strong>
</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px" vAlign=top>{Title}</td>
</tr>
<tr>
<td style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<div style="border-bottom: 3px solid #213e64;"></div>
</td>
</tr>
</tbody>
</table>
You forgot to close the HR tag and have some styles that are not needed, try this
<TABLE style="WIDTH: 350px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px; COLOR: #213e64"
vAlign=top><STRONG>{First name} {Last name}</STRONG></TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 350px"
vAlign=top>{Title}</TD></TR>
<TR>
<TD style="FONT-SIZE: 11pt; FONT-FAMILY: Arial; WIDTH: 400px" vAlign=top>
<HR
style="HEIGHT: 3px; WIDTH: 80%; DISPLAY: inline-block; BACKGROUND-COLOR: #213e64"
align=left />
</TD></TR>
</TBODY>
</TABLE>
I'm totaly begginer in creating HTML body, but i need to create HTML body of an email, i have to put into that email message Table with some data. It is pretty simple table with 2 rows and 4 columns but, there are 3 cell that have to be splite. So i've created table (1 row 2 columns) inside that cell. And here is the problem, while filling those new cell, there "main" cell is not filled correctly, please see below.
an example
How to fill that correctly. I would be grateful for a code that fill it.
My html body:
<table style="text-align: center; padding: 8px; width: 600px;" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table style="height: 50px; width: 150px; text-align: center;" >
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
And i would like to get something like that:
example
All of your <table> needs to be
<table cellspacing="0" cellpadding="0" border="0">
this will remove the extra white padding in<td>
<table cellpadding="0" cellspacing="0" border="0" style="text-align: center; padding: 8px; width: 600px;" border="1"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 150px; text-align: center;">Done</td>
<td style="width: 150px; text-align: center;">Success</td>
<td style="width: 150px; text-align: center;">Overwrited</td>
<td style="width: 150px; text-align: center;">Unrecognized</td>
</tr>
<tr>
<td style="font-size: 24px; font-weight: bold;">{1}</td>
<td>
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#00cc00">{2}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#00cc00">{3}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px; ">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#ee4c50">{4}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#ee4c50">{5}%</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 150px;">
<table cellpadding="0" cellspacing="0" border="0" style="height: 50px; width: 150px; text-align: center;">
<tbody>
<tr>
<td style="height: 50px; width: 75px; border-right:solid 1px; font-size: 24px; font-weight: bold;"
bgcolor="#99ccff">{6}</td>
<td style="height: 50px; width: 75px; font-size: 24px; font-weight: bold;" bgcolor="#99ccff">{7}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
**UPDATE:
#tablaarriba a:hover {
color: gray;
}
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
<a style="color: black; text-decoration: none; background-color: transparent;" href="social.htm">Social</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
<a style="color: black; text-decoration: none;" href="file:///Users/monmunoz/Desktop/Colegio/Tec/Quinto%20Semestre/ITGS/PROYECTO/Comercial.htm">Comercial</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="proyectospersonales.htm">Proyectos Personales</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="sobrelafotografa.htm">Sobre la fotógrafa</a><br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
** I changed some details in the html pointed out by the HTML validator. So now I have this.
I'm almost done building my website; however I'm trying to incorporate the a:hover attribute in my stylesheet and I don't know what I'm doing wrong. I want my links to change to color grey whenever the mouse passes above them. Please help me. So far I have this:
Try this:
#tablaarriba a:hover {
color: gray ;
}
<div id="tablaarriba">
LINK
</div>
table a:hover {
color: gray ;
}
table a {
color: black; text-decoration: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link href="menuarriba.css" rel="stylesheet" type="text/css">
<title>Rosy G Photography and Artwork</title>
</head><body>
<table style="text-align: left; width: 1113px; height: 123px; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><br>
<div style="text-align: left;"><img style="border: 0px solid ; width: 240px; height: 95px;" src="Fotos%20ITGS/Logo/logo_rosy.jpg" alt="RosyGLogo"></div>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<div id="tablaarriba">
Social<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
</div>
Comercial<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Proyectos Personales<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
Sobre la fotógrafa<br>
</td>
<td style="vertical-align: top; text-align: center; font-family: Century Gothic; color: black;"><br>
<br>
<br>
<a style="color: black; text-decoration: none;" href="contacto.htm">Contacto</a><br>
</td>
</tr>
</tbody>
</table>
<table style="text-align: left; width: 100px; margin-left: auto; margin-right: auto;" border="0" cellpadding="10" cellspacing="20">
<tbody>
<tr>
<td style="vertical-align: top;"><img style="width: 367px; height: 244px;" src="Fotos%20ITGS/Comercial/DSC_1647.jpg" alt="DSC_1647.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3043.jpg" alt="DSC_3043.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3813.jpg" alt="DSC_3813.jpg"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3074.jpg" alt="DSC_3074.jpg"></td>
<td style="vertical-align: top;"><img style="width: 367px; height: 245px;" src="Fotos%20ITGS/Comercial/DSC_3817.jpg" alt="DSC_3817.jpg"></td>
<td style="vertical-align: top; text-align: center;"><img style="width: 244px; height: 367px;" src="Fotos%20ITGS/Comercial/DSC_3077.jpg" alt="DSC_3077.jpg"></td>
</tr>
</tbody>
</table>
<br>
<div data-role="footer">
<div style="text-align: center;"> <small><span style="font-family: Century Gothic;">Rosy G. Photography ©</span></small><br>
</div>
<h1 style="text-align: center;"><br>
</h1>
</div>
</body></html>
I recommend adding a class to you're a element. Then use that class inside of the CSS, and try from there. If that does not work, then you might try using transition.
.a {
text-decoration: none;
color: black;
-webkit-transition: 0.256s;
}
.a:hover {
transition: 0.256s;
color: grey;
}
Test
The inline style style="color: black;..." is stronger than non-inline styles, so you cannot override it.
You should stylize the a tag with a selector (class or tag one).
How can I align image and text in a table? Here is a screenshot of what I have done so far: https://www.dropbox.com/s/o8jxyt4w3lzddoc/table.png
I want the text to be aligned with the image!!
Here is my code:
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line"></a>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
</td>
</tr>
Keep your Markup and Styling seperate:
HTML
<table>
<tr>
<td>
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line">
<span style="">text here</span>
</td>
</tr>
</table>
CSS:
td span { vertical-align:top }
JSFiddle Demo
You can add style="vertical-align:top" to td like this:
<tr>
<td valign="top" style="vertical-align:top; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line"></a>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
</td>
</tr>
In general to align two elements you can set them to display: inline/inline-block and them use vertical-align proprty:
img, span {
display: inline-block;
vertical-align: middle;
}
Demo: http://jsfiddle.net/6UBQZ/
Use vertical alignment for an image as a middle. Below is edited code:
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line" style="vertical-align: middle">
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span>
</td>
</tr>