html - 使此图像位于文本左侧，文本位于顶部还是中间？

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/