[Solved] Header elements positioning

[gombroo]

Hello,
quick question – how to move phone number and e-mail a little bit upwards? I’d like to place them in the middle of header container and closer to the logo.
http://royal-camp.pl/
Thank you!

[Chris House]

A quick and dirty solution is to give the #address and #phone elements a negative top margin. margin-top: -70px puts them roughly in the middle. There are more elegant solutions, but this should get you there.

[gombroo]

And not so dirty solution? :)

[Paulie_D]

Restructure the whole header so the whole thing elements appear in DOM order so you don’t have to use floats.

Make them all inline-block, center and vertical align them..then use left/right margins to create the spacing you need.

[Alen]

Yup what @paulie_d said.

Here’s a quick proof of concept

http://codepen.io/alenabdula/pen/BjRggG

[Paulie_D]

Or flexbox…which works without all the extra divs

http://codepen.io/Paulie-D/pen/YwVmGL}

[gombroo]

Flexbox did the job! Thanks @Paulie_D! I love this forum :D

[Author]

Posts