HTML，CSS徽标对齐

Question

我正在尝试在导航栏中将徽标和我在那里的一些文字对齐，但无法正常工作。 我只能将徽标放到特定位置，仅此而已。

有什么帮助吗？

更新！！！

nav {
background-color: #87CEFA;   
width: 1278px;
left: 1px;
padding-bottom: 15px;
margin-top: -40px;
position: absolute;

}
h1 {
color: #AFEEEE;
float: left;
right:220px;
top:180px;
}
#logo{
width:200px;
height:120px;
float:left;
}

Index.php：

 <h1 class="logo" style="font-size: 40px;">Website</h1>
 <img id="logo" src="logoo.png" width="300" height="300" alt="Theinterpage logo">

当我运行上面的代码时，导航栏的高度非常长，并且登录按钮不可用。 但是徽标确实显示在适当的位置。

Answer 1

<h1 class="logo" style="font-size: 40px;">Website <img id="logo" 
src="logoo.png" width="300" height="300" alt="Theinterpage logo"></h1>

试试这个。不知道这是否是一个优雅的解决方案，但我认为它可行

在JSfiddle上尝试过

我在JSfiddle中尝试过。 你想要这样的东西吗？ 另一个答案提到，您可能不会在此处共享所有代码。

编辑我试图用你的代码来做到这一点。 看看是否是您想要的。

这里用代码编辑了JSfiddle图片

编辑这是你在找什么

Answer 2

首先，将它们放在同一行上并删除<h4>标签。 h4用于格式化标题，而不是图像，因此将其内容推到新行。

然后删除所有“顶部”，“底部”，“绝对”格式，因为这会使行为无法预测并且更难解决。

进行了这些更改之后，我使徽标出现在文本旁边：

 h1 { color: #AFEEEE; float: left } 

 <h1 class="logo" style="font-size: 40px;">Website</h1><img id="logo" src="logoo.png" width="300" height="300" alt="Theinterpage logo">