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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Use caption for the alignment along picture