CSS h1定位

我试图在指南针标志旁边的白色DIV内找到写着“Test”的文字。我不知道我做错了什么，也不知道如何解决这个问题。下面是它的样子：

以下是我的CSS：

#nav{
clear: both;
margin-top: 20px;
background-color: #FFF;
width: 45%;
height: 75px;
margin-right: auto;
margin-left: auto;
border-radius: 5px;
-webkit-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46);
-moz-box-shadow:    0px 6px 5px 0px rgba(48, 50, 50, 0.46);
box-shadow:         0px 6px 5px 0px rgba(48, 50, 50, 0.46);
}
img.logo{
margin-top: -15px;
display: inline;
}
h1.title{
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 2.5em;
color: #FFEA00;
display: inline;
}

和HTML

<div id="nav">
    <img class="logo" src="images/compass.png" alt="Compass" />
    <h1 class="title">Test</h1>
</div>

试验

---

提前感谢

要使图像显示在

h1

上方，您只需应用

位置：绝对到图像本身，然后可以删除一些不必要的CSS:）

下面是它的

CSS

您只需要
position:absolute
就可以允许文本在图像下方移动，就像（粗略地说）
position:absolute
将文本放置在离它最近的祖先位置上一样

img.logo{
    /*margin-top: -15px;*/
    /*display:inline;*/
    position:absolute;

}

然后，您也可以删除一些其他CSS：

h1.title{
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 2.5em;
    color: red;
    /*display: inline;*/ 
    /*margin-top: -500px;*/
}

你没有在css中浮动任何内容，clear对你没有帮助。你使用的是负边距…@Bhojendra-C-LinkNepal实现相同结果的合适替代方案是什么？删除负边距…@Bhojendra-C-LinkNepal哎呀，我甚至没有注意到我的css上有h1.title。我以为你在为这张照片指出它。有什么办法可以让文字正确定位吗？