如何使用CSS垂直对齐图像旁边的多个文本？

Question

我有以下代码：

<div style="width: 150px">  
<div style="padding: 5px">
   <img src="http://xenforomods.info/styles/Silent/xenforo/browser/announcementIcon.png" width="50px" style="vertical-align:middle">
    <span style="font-size:10px;">Some text here jasjsjsjsjsjjsjsjsjsjsjsjs</span>
</div>      
</div>

http://jsfiddle.net/2rAGf/

其中显示的图像如下：

如何将此图像旁边的多条线居中，以便此jasj....不会沿着图像向下移动。

Answer 1

检查此链接

为图片标记

提供float:left样式

http://jsfiddle.net/2rAGf/12/

Answer 2

您可以对float: left和img元素使用span。但是你需要稍微扩展容器（div）的宽度，例如：250px ..而不是150px

Answer 3

一种方法是将外部div的display-property设置为“inline”，如下所示：

<div style="width: 150px; display: inline;">  
<div style="padding: 5px">
   <img src="http://xenforomods.info/styles/Silent/xenforo/browser/announcementIcon.png" width="50px" style="vertical-align:middle">
    <span style="font-size:10px;">Some text here jasjsjsjsjsjjsjsjsjsjsjsjs</span>
</div>      
</div>

Answer 4

修复文本范围的宽度并将显示设置为内联块。

<div style="">  
<div style="padding: 5px">
   <img src="http://xenforomods.info/styles/Silent/xenforo/browser/announcementIcon.png" width="50px" style="vertical-align:middle">
    <span style="font-size:10px; width:100px; display:inline-block;">Some text here jasjsjsjsjsjjsjsjsjsjsjsjs</span>
</div>      
</div>