Centering elements vertically in header

Hi there. I am new to this tool, and new to web design in general. I am trying to create a nice looking, if simple, header for my first page and I do not understand how to center things vertically. First, the text block is closer to the top than the bottom, and I would like it to be smack in the middle. Second, the login button on the right sticks to the top of the header and I cannot seem to get it to lower so that it is in the middle of the header. I will try to include an image…

Hi @zeeple. below a short video on how to do so.

5 Likes

Hi there!
Being new to Webdesign these things can be frustrating- I remember :wink:

The idea of vertical centering is based on a known height of the so called „parent element“ and then positioning the „child element“ (the one you want to center in the parent) with for example absolute positioning and margins within it

I suggest W3schools for learning the first grasps of HTML and css because you’ll need it down the road

The method shown by @Jerry is absolutely valid, especially within blocs there is little need for knowing full HTML and css, but it will help you to have a grasp of it.

Note that you’ll perhaps need to do this with custom classes and css rules when it comes to elements not provided in blocs out of the box
And, there are as always more than one way of achieving things.

4 Likes

Hi @smileBeda 100% true. The solution provided is simple and does the trick. The hover effect on the Navbar a I created a few weeks ago needed much more thinking :thinking::

5 Likes

Very nice.
Pandoras’ box is starting to open!!

2 Likes

Thank you for this! I went through your video several times, basically frame by frame trying to follow what you were doing and I was able to accomplish the alignment of the items. Thanks again for taking the time to post this!!

1 Like

Thank you for the encouragement and for the link to the w3schools! I’ll definitely include that in my self-taught curricula!

It looks nice!

How did you do that?

Here you go: https://codepen.io/ivanaugustobd/pen/GmOEBw

1 Like