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>

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

提前致谢！ Rain Lover

Answer 1

老实说，从你的例子来看，我有一种感觉，你可能会采取一些错误的方法。

我个人会将此图标作为CSS background-image附加到div。之后，您可以在div的左侧应用填充等于图像的宽度（加上几个像素的间距）。然后，您将能够使用background-position来执行以下操作：

background-position:0px center;

这将为您提供更高程度的控制，我认为您正在追求。

Answer 2

对于img和div这样的块元素，你不能将它们垂直放置在某个东西的中心，而不是实际上有一个东西（元素）将它们垂直居中。

虽然说除了使用some sort of hack之外仍然不可能。更简单的方法是在其中一个元素上使用relative位置并偏移其位置，以便在视觉上创建相同的效果，或使用边距/填充来执行相同的操作。

Answer 3

可以通过以下方式完成。没有简单的中心方法，除非你把它放在一个特定高度的元素里面并且可以玩。这可以在http://jsfiddle.net/jawilliams346614/CvpUB/1/

查看

<div>
    <img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
    <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;float:left;">John Doe</span>
        <span style="color:#808080">11/14/2010 3:23:44</span>
    </div>
</div>

现在，如果增加字体大小，则必须将填充更改为：

 padding-top: 5px; // change in sync with bottom to center in text
 padding-bottom: 5px;
 padding-left: 5px;
 padding-right: 5px;

图片旁边的图片

3 个答案: