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

RakonDark

Nutzer, der sehr aktiv auf gutefrage ist

im Thema programmieren

14.10.2016, 15:14

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

kingbongo

14.10.2016, 15:26

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/

RakonDark

14.10.2016, 15:42

@kingbongo

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 .

RakonDark

14.10.2016, 15:46

@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/

kingbongo

14.10.2016, 16:07

@RakonDark

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.

Caeasarus

Fragesteller

14.10.2016, 19:12

@kingbongo

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.

RakonDark

14.10.2016, 21:30

@kingbongo

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 .

RakonDark

14.10.2016, 21:30

@Caeasarus

dann mal lernen wie css angewendet wird . :))

Ähnliche Fragen

JavaScript (html) Element zentrieren?

Hallo ich habe in JavaScript ein Element erstellen lassen und die Größe perfekt angepasst, nun muss es nur noch zentriert werden aber irgendwie funktioniert nichts, egal was ich versuche bleibt es immer in der linken oberen Ecke!

...zur Frage

Wie kann ich einen Button vertikal zentrieren?

Ich habe auf meiner Webseite einen Button, der ganz allein auf der Startseite stehen soll. Er ist schon horizontal zentriert mit diesem Code:

"div align= center"

Wie kann ich den Button nun noch vertikal zentrieren?

DANKE!

...zur Frage

div genau mittig zentrieren?

Hi, ich will ein <div> mittig zentrieren, also nicht nur horizontal sondern auch vertikal, also einfach in der Mitte des Bildschirms. Jemand ne Idee wie das gehen könnte, hab schon fast das ganze Internet durchkämmt...

So soll das am Ende sein... DANKE!!!

...zur Frage

HTML - Text vertikal zentrieren?

Hat jemand von euch eine Idee warum die Überschrift nicht mittig zentriert wird? Ich habe es mit vertical-align, align-content und align-items usw probiert aber nichts zeigt einen Effekt.

https://images.gutefrage.net/media/fragen/bilder/html---text-vertikal-zentrieren/0_big.png?v=1516395008803"/>

...zur Frage

JavaScript UI ohne HTML / CSS?

Ist es möglich, komplett ohne HTML etwas zu programmieren, das aber eine Oberfläche hat und nicht nur im schwarzen Terminal läuft?

Man könnte mit Canvas auch ein bisschen zeichnen und ein paar Spiele entwickeln, aber dann braucht man trotzdem mindestens ein ganz kleines bisschen HTML für <canvas> und script src.

Wenn es möglich ist: Was wäre das einfachste Projekt, das ich umsetzen könnte?

...zur Frage

CSS: Wie kann man einen Text Vertikal zentrieren?

Hier ist mein Code: JSFiddle - Code Playground

Wie kann ich hier den Text Vertikal zentrieren. Also den Text in die Mitte schieben?

...zur Frage

Wie kann ich in HTML einen div in einem div vertikal zentrieren?

Hi,

frage steht im Titel.

Danke

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

html Navigationsleiste zentrieren?

Hi, wie kann ich machen, dass die Navigationsleiste, bzw. die Items, also die verschiedenen Tabellenreihen zentriert werden?
Code & Seite siehe Bilder

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Pinball-Game / JavaScript: Wie kann ich die Kollisionserkennung implementieren?

Hallo zusammen,

ich muss für die Uni ein kleines Single Page 2D-Spiel entwickeln. Die Backend REST-API mit Python, das Frontend mit HTML/CSS, die Logik mit JavaScript. Die Animationen sollen wir selbst entwickeln und nicht z.B. von canvas-Objekten übernehmen.

Ich versuche zurzeit ein Pinball-Spiel (Flipper-Automaten) und habe das Grundgerüst mit CSS gebaut. Nur habe ich mir die Kollisionserkennung deutlich leichter vorgestellt, als sie wahrscheinlich ist.

So sieht das Spielfeld momentan aus:

Die JavaScript-Logik sodass der Ball im Spielfeld bleibt, ist ja recht simpel:

  var ball = document.getElementById('ball');
  var playArea = document.getElementById('play-area');
  var ballRadius = 10;
  var playAreaWidth = playArea.offsetWidth; // 600
  var playAreaHeight = playArea.offsetHeight; // 820
  var ballX = playAreaWidth / 2; // Startposition des Balls in der Mitte des Spielfelds
  var ballY = playAreaHeight / 2; // X = 300, Y = 410
  var ballSpeedX = 3; // Geschwindigkeit des Balls in horizontaler Richtung
  var ballSpeedY = 3; // Geschwindigkeit des Balls in vertikaler Richtung
  
  function updateBallPosition() {
    // Aktualisiere die Position des Balls basierend auf der aktuellen Geschwindigkeit
    ballX += ballSpeedX;
    ballY += ballSpeedY;
  
    if (ballX + ballRadius > playAreaWidth || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Richtungswechsel in der horizontalen Richtung
    }
  
    if (ballY + ballRadius > playAreaHeight || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Richtungswechsel in der vertikalen Richtung
    }
  
    // Setze die neue Position des Balls
    ball.style.left = ballX + 'px';
    ball.style.top = ballY + 'px';
  }
  
  // Aktualisiere die Position des Balls alle 16 Millisekunden (ca. 60 Frames pro Sekunde)
  setInterval(updateBallPosition, 16);
}

Aber wie man es implementiert, sodass der Ball von den Hindernissen und Banden richtig abprallt, sodass ein Richtungswechsel entsteht, habe ich noch nicht wirklich verstanden. Hätte da jemand eine Idee oder Erfahrung, wie man hier an die Kollisionserkennung herangehen könnte?

LG und danke im Voraus. :)

...zur Frage

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zur Frage

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zur Frage

Indesign - Wie zentriere ich mein Text?

Wenn man ein Text im Textfeld hat, kann man denn ja zentrieren. So das er horizontal sowie auch vertikal zentriert von dem Textfeld gesetzt wird. Mit dem Befehl " zentrieren" (siehe Abbildung) wird der Text jedoch nur in horizontaler Ebene zentriert, aber ich bräuchte es noch horizontal.

Leider weiß ich nicht mehr wie ich das machen kann. Kann mir da jemand vielleicht helfen?

Vielen Dank schonmal im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen