Frage von Caeasarus, 32

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?

Antwort
von RakonDark, 23

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



Kommentar von kingbongo ,

Raki du bist sowas von vorgestern ^^, mit Flexbox brauchst du solche Krücken zum Glück nicht (mehr)

.canvas{ 
display: flex;
align-items: center;
justify-content: center;
}

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Kommentar von RakonDark ,

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 .

Kommentar von RakonDark ,

und damit wir die diskussion nicht führen .

Es gibt noch einige die nicht z.b. IE 11 nutzen

https://www.browser-statistik.de/statistiken/versionen/

Kommentar von kingbongo ,

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.

Kommentar von Caeasarus ,

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.

Kommentar von RakonDark ,

dann mal lernen wie css angewendet wird . :))

Kommentar von RakonDark ,

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 .

Keine passende Antwort gefunden?

Fragen Sie die Community