Html canvas vertikal zentrieren?
Ich habe eine Html seite und darin ein Canvas mit einer Uhr basierend auf javascript. Diese möchte ich nun gerne in der mitte der Seite haben horizontal zentriert habe ich sie mit
allerdings weiß ich nicht wie es vertikal möglich ist. Kann mir jemand sagen wie das möglich ist?
1 Antwort
normalerweise nimmt man dazu ein trick
top:50%
damit gehts also in die mitte (nur wenn das eltern objekt die höhe 100% des views hat.
und dann haben wir ja noch das objekt selber mit einer höhe von Y px ,
damit das nicht ab 50% klebt sondern dort mittig ist , muss man die hälfte wieder nach oben .
also margin-top: -Y/2 px
guter hinweis , bringt mir leider nichts bei browsern die das nicht unterstützen , da sollte man ein fallback auch kennen . ergo nehmen wir beides läufts garantiert .
und damit wir die diskussion nicht führen .
Es gibt noch einige die nicht z.b. IE 11 nutzen
Im IE 11 gehts (grad den Softwaremüll aus der Mottenkiste geholt und damit getestet), Flexbox ist aber schon ca 3 Jahre alt, wer ein so alten Browser aus Prinzip verwendet der spielt sicher noch mit seinem C64 rum. Willst du solche Nasen noch supporten, ich mach es definitiv nicht.
Ich danke euch beiden für eure Antworten, allerdings benutze ich in meinem Sourcecode nur Html und javascript und fange damit auch erst an deswegen wäre es gut wenn ich mir sagen könntet wie ich das damit programmieren kann.
was du machst ist mir egal , meine kunden sind weltweit und mit weit aus schlechteren rechnern unterwegs . und so hoch trage ich meine Nase nicht . Fallbacks sind ein muss und zeugen nicht von unfährigkeit sondern von faulheit und ignoranz . Wenn mir eine Website bestimmt was ich für hardware + software haben soll , naja dann gehts halt zur nächsten .
Raki du bist sowas von vorgestern ^^, mit Flexbox brauchst du solche Krücken zum Glück nicht (mehr)
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/