Stuck with this project.

Hell guys So i'm learning html+ccs.

So I am making a project but I am stuck. Something with my header:

This is what i need to get:

Couple of thinks that i tried:

Tried to put the tree image ass a background-image. but that didn't work wasn't be able to put the image next the h1(make-a-wishlist for santa!)
So then i tried to put image in html. so I can place the image and the h1 as display: inline-block. (so now the image and the h1 are next to each other.)
Problem is i want to push the h1 a bit up so it stays in the middle of the picture.

This is what im able to do:


the header has to be centered.

Anyone who can help me put the h1(make-a-wishlist for santa!) like this:

Code:

<header>
<img src="images/xmas-tree.gif" title="xmas-tree" name="xmas-tree"/>
<h1>Make-a-wishlist for Santa!</h1>
</header>


ps: don't worry about the background i'm able do it.

I'm not a web developer, but adding vertical-align: middle; to both the image and h1, in addition to the inline-block style causes it to align the way you want. Hopefully a web dev can give you a better answer.

Try a negative margin; https://www.w3schools.com/css/css_margin.asp
That should bring them closer together.

I guess setting the image as background and offsetting the text would then indeed be the best solution. Again, I'm not a web developer, I just tried some stuff in a html fiddle to see what could work.

Centering images nested inside a div are done using

Code:

margin: 0 auto;

That will horizontally align your image using div's properties (set up the width to 100% or to 100vw)

Oh rofl, I misread your request.

To vertical align a h1 so it has the same height as the image, use min-height and max-height and they have to be equal to div's height parent.

Use w3 to help you code websites, center images, etc

It helped me