css - Table cell content: align text top-left and image in the middle in HTML -
i have table in html. content of table text , image. align text in top-left corner , image in middle (vertical-align). tried in way:
css:
table td {border-collapse: collapse;} #tabella {border: 1px solid black; text-align: left; vertical-align: top;} #variante {vertical-align: middle;}
html:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text <br> <img id="variante" width="75" border="0" src="www.favetta.com/image.png"> </td>
but in way obtain (text , image) aligned in top-left corner of cell. suggestion?
are doing email? if inline styling fine (although won't work in email clients have default.
if email like...
<table> <tr> <td align="center"> <table width="100%"> <tr> <td align="left">this text</td> </tr> </table> <br/><br/> <img src="http://s27.postimg.org/fs9k8zewj/cow1.png"> <br/><br/><br/><br/> </td> </tr> <table>
it looks crude browsers , email clients ignore 'height='. purely ive found years of email templating.
if not email, try , avoid tables - if can't try like...
<table> <tr> <td class="content"> text <img src="http://s27.postimg.org/fs9k8zewj/cow1.png"> </td> </tr> <table>
css
table{ border:1px solid grey; width:100%; } .content{ text-align:left; } .content img{ width:75px; vertical-align:middle; transform: translate(-50%, -50%); margin: 100px 50% 50px 50%; }
Comments
Post a Comment