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

有什么想法吗？

提前致谢。

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"属性。

<强> E.g。

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

这里是JsFiddle Link。

它更简单，更干净吗？

希望它有所帮助。

将文本放在文本的左侧，文本位于顶部或中间？

2 个答案: