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">