无法将图像与文字对齐

Question

我在对齐图像时出现文字问题。

#content img{ 
    border: 2px solid black; 
    vertical-align: middle; 
} 

<div id="content"> 
    <h1><b>Company News 1</b></h1> 
    <img src="http://www.placehold.it/120x120"> 
    <span style=""> 
     A lot of text... 
    </span> 
</div> 

结果是这样的：

我在做什么错？

Answer 1

#content img{ 
    border: 2px solid black; 
    float:left; 
    margin-right:5px; 
} 

Answer 2

我假设你想让文字环绕图像？而不是尝试以下 -

#content img { 
border: 2px solid black; 
float: left; 
} 

Answer 3

检查JS小提琴

http://jsfiddle.net/5vzBS/

#content img 
{ 
    border: 2px solid black; 
    vertical-align: middle; 
    float:left; 
} 

Answer 4

像这样

DEMO

#content img { 
    border: 2px solid black; 
    vertical-align: middle; 
    float: left; 
    margin: 0 10px; 
} 

Answer 5

使用float:left财产

#content img{ 
    border: 2px solid black; 
    vertical-align: middle; 
    width:120px; 
    height:120px; 
    float:left; 
} 

小提琴：http://jsfiddle.net/kJHK7/1/

Answer 6

EXAMPLE

简单和容易。享受

#content img { 
    border: 2px solid black; 
    vertical-align: middle; 
    float:left; 
    margin:0 20px 10px 0; 
}