為什么我的圖像沒有與 html 中標題的右側對齊？

Question

我嘗試將我的圖像下一個（右側）與我的標題對齊。 使用以下代碼。 以下 html 元素代碼：

 /* And Tried to Align using css */ #colorlib-logo img { display: flex; align-items: center; width: 30px; height: 30px; } #colorlib-logo h1 { margin-right: 3px; margin-left: 0px; } #colorlib-logo { width: 300px; }

 <h1 id="colorlib-logo"><a href="">HaamTheLord</a><img src="" alt="logo" /></h1>

此代碼顯示標題下方的圖像。但我希望圖像顯示在文本右側

Answer 1

所以你把 display flex 放在圖像上，它需要 go 在父級上；

我對 CSS 做了很多改動，使其更簡單。 我還更改了 HTML 標記，我將父標記設為錨點（鏈接），文本現在是 H1

 #colorlib-logo { display: inline-flex; align-items: center; justify-content: center; } #colorlib-logo h1 { font-size: clamp(1rem, 4vw, 4rem); margin: 0 0.5rem 0 0; }

 <a href="#" id="colorlib-logo"> <h1 href="">HaamTheLord</h1> <img src="" alt="logo" height="30" width="30" /> </a>

Answer 2

您正在錯誤地應用 display: flex 屬性。

我對您的代碼做了一些更改，請檢查：

 #container { display: flex; justify-content: space-between; align-items: center; } #colorlib-logo img { width: 30px; height: 30px; } #colorlib-logo h1 { margin-right: 3px; margin-left: 0px; } #colorlib-logo { width: 300px; }

 <div id="container"> <h1 id="colorlib-logo"><a href="">HaamTheLord</a></h1> <img src="https://i.stack.imgur.com/11BLZ.jpg" alt="logo" /> </div>