web-dev-qa-db-fra.com

Comment centrer la toile en html5

Je cherche une solution depuis un moment maintenant, mais je n'ai rien trouvé. Peut-être que ce sont juste les termes de ma recherche ... Eh bien, j'essaie de centrer le canevas en fonction de la taille de la fenêtre du navigateur. La toile mesure 800x600 . Et si la fenêtre passe en dessous de 800x600, elle devrait aussi être redimensionnée (mais ce n’est pas très important pour le moment)

html5htmlcanvascss3resize
92
jorgen

Donnez à la toile les propriétés de style css suivantes:

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

Modifier

Puisque cette réponse est très populaire, permettez-moi d'ajouter un peu plus de détails.

Les propriétés ci-dessus vont horizontalement centrer le canevas, le div ou tout autre nœud que vous avez par rapport à son parent. Il n'est pas nécessaire de modifier les marges et les rembourrages supérieurs ou inférieurs. Vous spécifiez une largeur et laissez le navigateur remplir l'espace restant avec les marges automatiques.

Cependant, si vous voulez taper moins, vous pouvez utiliser les propriétés abrégées css que vous souhaitez, telles que

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

Centrer le canevas verticalement nécessite cependant une approche différente. Vous devez utiliser le positionnement absolu et spécifier la largeur et la hauteur. Définissez ensuite les propriétés left, right, top et bottom sur 0 et laissez le navigateur remplir l'espace restant avec les marges automatiques.

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

Le canevas se centre sur le premier élément parent pour lequel position est défini sur relative ou absolute ou sur le corps s'il n'en trouve aucun.

Une autre approche consisterait à utiliser display: flex, disponible dans IE11.

Assurez-vous également que vous utilisez un doctype récent tel que xhtml ou html 5.

150
Marco Luglio

Vous pouvez donner à votre toile les propriétés CSS ff:

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

Il suffit de centrer la div en HTML:

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


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

Modifiez simplement la hauteur et la largeur et vous obtenez un div centré

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

20
JoeCianflone

Les réponses ci-dessus ne fonctionnent que si votre toile a la même largeur que le conteneur.

Cela fonctionne indépendamment de:

#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

Utilisez ce 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

J'ai eu le même problème, car j'ai des images avec beaucoup de largeurs différentes que je charge uniquement avec des informations de hauteur. Définir une largeur permet au navigateur d’étirer et de pincer l’image. Je résous le problème en ayant la ligne de texte juste avant la ligne image_tag centrée (en supprimant également float: left;). J'aurais aimé que le texte reste aligné, mais c'est un inconvénient mineur que je peux tolérer.

2
MDM

Pour centrer l'élément de canevas horizontalement, vous devez le spécifier en tant que niveau de bloc et laisser ses propriétés de marge gauche et droite au navigateur:

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

Si vous voulez le centrer verticalement, l'élément canvas doit être positionné de manière absolue:

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

Si vous vouliez le centrer horizontalement et verticalement, faites:

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

Pour plus d'informations, visitez le site: https://www.w3.org/Style/Examples/007/center.en.html

1
Konkret

Ajoutez text-align: center; à la balise parent of <canvas>. C'est tout.

Exemple: 

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