如何将 H1 与图像对齐

Question

I have this block of code, but the H1 is very slightly higher than the image. Is this a way I can bring this perfectly inline?

 <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

You should move image from the outside of the H1 tag. Try this one!

<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

The image inside the h1 was the problem. The container div was already applying the correct styles you wanted.

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

Use caption for the alignment along picture