将此图像放在文本的左侧，文本在顶部还是在中心？

Question

我在互联网上找了很长时间，得到一个文本左侧的图像，文本在顶部或 div 的中心。我在互联网上查看了很多帖子，How to have image and text side by side、Cant figure out how to have image and text side by side in a div and keep it responsive, fiddle included 以及其他一些帖子。

HTML

<div id="header">
    <img src="logo1.png" alt="LimitMove Logo"> </img>
    <h1> Limit Move </h1>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}
a,a:link,a:visited,a:hover,a:active{
    color: #3C3C3C;
    text-decoration: none;
}
a:hover,a:active{
    color:#4D4D4D;
}

h1{
    font-family: Tahoma;
    font-size: 28px;
    color: #DFDFDF;
}

#header{
    display: inline-block;
    width:100%;
    height: 64px;
    background-color: rgb(0,120,170);
}

#header img{
    display: inline;
    vertical-align:bottom;
}

#header h1, #header > #navbar{
    display: inline;
    text-align: text-top;

}

JSfiddle

您可以看到文本位于#header div 标签的底部，而我无法将其移至顶部。 我尝试使用 padding-top:-20px;与margin相同，但它们都不能正常工作。

有什么想法吗？

提前致谢。

Answer 1

#header h1, #header > #navbar{
    display: inline;
    text-align: text-top;
}

text-top 不是 text-align 的有效值（而 text-align 用于水平对齐）。

你想在这里使用vertical-align，就像你对图像所做的一样；并且您想同时使用top。

http://jsfiddle.net/eed6pb9p/2/

Answer 2

尝试在图片中添加align="left" 属性。

例如

<img src="http://i.imgur.com/lpJjofK.png" alt="LimitMove Logo"  align="left" />

这是JsFiddle Link。

简单明了，对吧？

希望对你有帮助。