Stuck with this project.

[wizardshogwarts]

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.

[wizardshogwarts]

Bumping this still havent found it. no css/html users?

[Hell_Demon]

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.

[wizardshogwarts]

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.

You did help me in a way. But to place the img en text closer. any ideas?



- - - Updated - - -

Like should i put the img as background image.

[Hell_Demon]

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

[wizardshogwarts]

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

allready thought of this but my teacher hates using negative margin. so there should be another way to fix this.
but thanks for your effort.

[Hell_Demon]

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.

[Stack]

Centering images nested inside a div are done using

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.

[Matthew]

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

It helped me