使该图像位于文本的左侧，文本位于顶部还是居中？

Question

我已经在互联网上寻找很长时间了，以使图像位于文本的左侧，而文本位于div的顶部或中心。 我看了互联网上的很多帖子， 如何并排放置图像和文本 ，不能弄清楚如何在div中并排放置图像和文本，使其保持响应性，包括小提琴和许多其他内容。

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; 与保证金相同，但它们均无法正常工作。

有任何想法吗？

提前致谢。

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链接 。

简单，干净吧？

希望能帮助到你。