如何將 H1 與圖像對齊

Question

我有這段代碼，但 H1 比圖像略高。 這是我可以完美內聯的方式嗎？

 <div style="display: flex; align-items:center;"> <h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;"> <img style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" /> My Text</h1> </div>

Answer 1

您應該從 H1 標簽的外部移動圖像。 試試這個！

<div style="display: flex; align-items:center;">
   <img style="vertical-align: middle;"src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" />
   <h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;">My Text</h1> 
</div>

Answer 2

h1 中的圖像是問題所在。 容器 div 已經應用了您想要的正確樣式。

<div style="display: flex; align-items:center;">
    <img style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg" width="40" height="40" />
    <h1 style="margin-top: 0; margin-bottom: 0; color: #333; padding: 0.6rem;">My Text</h1> 
</div>

Answer 3

 <figure> <img src="pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure>

使用標題沿圖片對齊