无法将图像与文本对齐

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