html - 无法将图像与文本对齐

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

像这样

演示

#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

例子

简单易行。享受

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