Vertikale Überschrift (im header) die zentriert ist und sich links befindet

[Rolf B]

Hallo Ingrid,

tja, ist nicht ganz so einfach. Ein transform:rotate rotiert das Ding nachdem es platziert wurde, d.h. wenn Du den Namen breit genug haben willst bläst es Dir den Container auf, in dem er steht.

Was hilft, ist writing-mode: vertical-lr, zusammen mit einem transform:rotate(180deg) auf dem Text. Allerdings ist writing-mode relativ neu und wird nur von FF und Chrome unterstützt. Hinter Safari ist in der Kompat-Tabelle ein ?. Für IE/Edge User würde der Text horizontal dargestellt.

Die Alternative wäre ein Bild mit dem gedrehten Text drin, das Du bei hinreichend breiten Viewports einfach links hinklebst. Mach transparenten Hintergrund, dann sieht's wie Text aus. Das Rendering gedrehter Texte ist - zumindest unter Windows - ohnehin nicht so schön.

https://jsfiddle.net/3xh0to1a/

Keine Ahnung ob es bessere Methoden gibt...

Rolf