将 <div> 标记中的图像和文本对齐在同一顶行

Question

我正在尝试在图像旁边放置一个图像和一些文本，它们都在顶部垂直对齐。这是我正在使用的代码，但它似乎没有工作。它在底部对齐文本

<img src="http://localhost/wordpress/wp-content/uploads/2012/04/Desktop.png" alt="" style="float:left; margin-right:5px;" />
<div class="box"><a href="#" target="_blank">Click here to take an online demo</a></div>

'box' 在样式表中看起来像这样，

.box {
/* border: 0px solid; */
overflow: hidden;
}

这就是现在的样子

您能否建议需要进行相关更改以使其看起来像这样

Answer 1

使用 vertical-align:top 到 .box css（或）margin-top

示例css

             .box {
         /* border: 0px solid; */
             overflow: hidden;
             margin-top:-5px;

                  }