Home/ Questions/Q 3444718
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:57:03+00:00

How can I put an <img> next to a <div> so the image vertically

  • 0

How can I put an <img> next to a <div> so the image vertically aligns in the middle?

<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>

I know how to do it using a table:

<table style="font:10pt Arial">
<tr>    
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>    
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
  </tr>
</table>

But I wonder if I could do it without a table.

Thanks in advance!
Rain Lover

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.

    Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:

    background-position:0px center;

    This will give you the higher degree of control that I think you’re after.

    • 0