webentwicklung-frage-antwort-db.com.de

So zentrieren Sie die Leinwand in HTML5

Ich habe schon lange nach einer Lösung gesucht, aber nichts gefunden. Vielleicht handelt es sich nur um meine Suchbegriffe ... Nun, ich versuche, die Leinwandmitte entsprechend der Größe des Browserfensters zu gestalten. Die Leinwand ist 800x600 . Und wenn das Fenster unter 800x600 fällt, sollte es auch die Größe ändern (aber das ist im Moment nicht sehr wichtig)

92
jorgen

Geben Sie der Leinwand die folgenden CSS-Stileigenschaften:

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

Bearbeiten

Da diese Antwort sehr beliebt ist, möchte ich noch ein paar Details hinzufügen.

Die obigen Eigenschaften werden horizontal die Leinwand, das div oder den anderen Knoten zentrieren, den Sie relativ zum übergeordneten Knoten haben. Die oberen und unteren Ränder und Polsterungen müssen nicht geändert werden. Sie geben eine Breite an und lassen den Browser den verbleibenden Platz mit den automatischen Rändern füllen.

Wenn Sie jedoch weniger eingeben möchten, können Sie die gewünschten Abkürzungseigenschaften verwenden, z. B.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Das Zentrieren der Leinwand vertikal erfordert jedoch einen anderen Ansatz. Sie müssen die absolute Positionierung verwenden und sowohl die Breite als auch die Höhe angeben. Setzen Sie dann die linken, rechten, oberen und unteren Eigenschaften auf 0 und lassen Sie den Browser den verbleibenden Platz mit den automatischen Rändern füllen.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Die Zeichenfläche zentriert sich auf der Grundlage des ersten übergeordneten Elements, für das position auf relative oder absolute gesetzt ist, oder auf den Hauptteil, wenn keines gefunden wird.

Ein anderer Ansatz wäre die Verwendung von display: flex, das in IE11 verfügbar ist

Stellen Sie außerdem sicher, dass Sie einen aktuellen Doctype wie xhtml oder html 5 verwenden.

150
Marco Luglio

Sie können Ihrer Zeichenfläche die ff-CSS-Eigenschaften zuweisen:

#myCanvas
{
    display: block;
    margin: 0 auto;
}
44
jinmichaelr

Zentriere einfach das div in HTML:

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Ändern Sie einfach die Höhe und Breite, und Sie haben ein zentriertes div

http://jsfiddle.net/BVghc/2/

20
JoeCianflone

Die obigen Antworten funktionieren nur, wenn Ihre Leinwand dieselbe Breite wie der Container hat.

Das funktioniert trotzdem:

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}
<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>

5
SystemicPlural

Verwenden Sie diesen Code:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>
2
Keyur Patel

Ich hatte das gleiche Problem, da ich Bilder mit vielen verschiedenen Breiten habe, die ich nur mit Höheninformationen lade. Durch das Einstellen einer Breite kann der Browser das Bild strecken und zusammenziehen. Ich löse das Problem, indem ich die Textzeile direkt vor der image_tag-Zeile zentriere (auch Float: left;) loswird. Ich hätte mir gewünscht, dass der Text linksbündig ausgerichtet ist, aber dies ist eine geringfügige Unannehmlichkeit, die ich tolerieren kann.

2
MDM

Um das Canvas-Element horizontal zu zentrieren, müssen Sie es als Blockebene angeben und den linken und rechten Rand des Browsers belassen:

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Wenn Sie es vertikal zentrieren möchten, muss das Leinwandelement absolut positioniert sein:

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Wenn Sie es horizontal und vertikal zentrieren möchten, machen Sie Folgendes:

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

Für weitere Informationen besuchen Sie: https://www.w3.org/Style/Examples/007/center.de.html

1
Konkret

Fügen Sie text-align: center; zum parent-Tag von <canvas> hinzu. Das ist es.

Beispiel:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>
0
Raj Yadav