图片旁边的图片

Question

如何在<img>旁边放置一个<div>图像,使图像在中间垂直对齐？

<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>

我知道如何使用表格来做到这一点:

<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>

但我想知道如果没有桌子我能不能做到.

提前致谢!雨情人

Answer 1

说实话,我觉得你可能会采取一些错误的方法.

我个人会把这个图标作为CSS附加到div background-image.之后,您可以在div的左侧应用填充等于图像的宽度(加上几个像素的间距).然后,您将能够使用background-position来执行以下操作:

background-position:0px center;

这将为您提供我认为您所追求的更高程度的控制.