CODEWITHSUNDEEP
htmlcss
Delboy
Delboy

Reputation: 21

How to align a H1 to an image

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>

Upvotes: 0

Views: 453

Answers (3)

Zain Ejaz
Zain Ejaz

Reputation: 289

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>

Upvotes: 3

Alejandro Martinez
Alejandro Martinez

Reputation: 189

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>

Upvotes: 1

Salam Aslam
Salam Aslam

Reputation: 23

<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

Upvotes: 0

Related Questions