如何使用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....多行，以使此jasj....不会在图像上显示。

Answer 1

检查此链接

为图片标签赋予float:left样式

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

Answer 2

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

Answer 3

一种方法是将外部div的显示属性设置为“内联”，如下所示：

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