Html/CSS Logo neben Menü auf höhe von der Menüleistenpunkte bekommen

[Sortepermand]

Hallo Zusammen,

Ich habe mich mal an meiner ersten Webseite in Html/Css versucht. Leider bekomme ich das Logo,welches ich als Menüpunkt eingebunden habe in die Menüleiste nicht mittig zu den Restlichen Menüpunkten und das Logo steht halt etwas mehr nach oben als die restlichen Menüpunkte.

Wenn ich dem Logo eine Class gebe und ein padding:absolute gebe passt sich das logo nicht an die Display größe an sondern schiebt sich beim verkleinern des Browserfensters über die anderen Menüpunkte. Ich habe das Logo dann wieder als Menüpunkt ohne bearbeitung in CSS geändert,denn so bleibt es an einer stelle beim verkleinern oder vergrößern des Browserfensters.

Meine Frage ist es wie kann ich das logo zu mindest mittig zu den restlichen Menüpunkten ausrichten und etwas nach links verschieben, so dass es sich auch bei Verkleinerung oder Vergrößerung des Browserfensters nicht verschiebt? Vielleicht kann mir der ein oder andere hier weiter helfen.


VG Sortepermand

So ist es bei mir:

und so möchte ich es haben:

Meine Website als Code:https://jsfiddle.net/#&togetherjs=boMFMuJF3m

 

[Cai-pirinha]

zwei dinge die mir dazu spontan einfallen:
- die line-height der li elemente einheitlich anpassen, dann zentriert sich alles automatisch vertikal. also probier z.b. einfach mal aus, li { line-height: 45px; } zuzuweisen.
- mit css flex-box vertikal zentrieren (man munkelt aber es gäbe immer noch gewisse browser (hust) die mit flex-box nicht ganz zurecht kommen)

das hat aber nix mit der links-verschiebung zu tun. position:absolute richtet das element natürlich absolut aus, womit die relation zu den anderen elementen verloren geht. klar, dass sich das dann u.U. überlappt. aber dein grundsätzliches problem hab ich dabei jetzt noch nicht ganz verstanden. was soll sich da mit der auflösung verändern? die logo größe (höhe) ist doch fix festgelegt auf 39px.. also tut sich da doch so oder so nichts.

achja, mach doch statt dropbox mal ein fiddle draus oder so...