Come centrare la tela in html5

105

Ho cercato una soluzione per un po 'di tempo, ma non ho trovato nulla. Forse sono solo i miei termini di ricerca. Bene, sto cercando di rendere il centro della tela in base alle dimensioni della finestra del browser. La tela è 800x600. E se la finestra scende al di sotto di 800x600, dovrebbe ridimensionarsi anche (ma non è molto importante al momento)

— Jorgen
fonte

Come gli dico di creare una tela a pagina intera senza dare dimensioni e senza avere barre di scorrimento durante il ridimensionamento?

— jorgen

2

Non farlo in HTML .. fallo con javascript, usa cose come appendChild o qualcosa del genere e imposta larghezza e altezza su window.innerWidth e window.innerHeight

— il JinX

173

Assegna alla tela le seguenti proprietà di stile CSS:

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

modificare

Poiché questa risposta è piuttosto popolare, lasciatemi aggiungere qualche dettaglio in più.

Le proprietà di cui sopra centreranno orizzontalmente la tela, il div o qualsiasi altro nodo che hai rispetto al suo genitore. Non è necessario modificare i margini superiore o inferiore e le imbottiture. Specificate una larghezza e lasciate che il browser riempia lo spazio rimanente con i margini automatici.

Tuttavia, se vuoi digitare meno, puoi usare qualsiasi proprietà abbreviata CSS che desideri, come

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

Centrare la tela verticalmente richiede tuttavia un approccio diverso. È necessario utilizzare il posizionamento assoluto e specificare sia la larghezza che l'altezza. Quindi imposta le proprietà sinistra, destra, superiore e inferiore su 0 e lascia che il browser riempia lo spazio rimanente con i margini automatici.

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

La tela si centrerà in base al primo elemento genitore che è stato positionimpostato su relativeo absolute, o sul corpo se non ne viene trovato nessuno.

Un altro approccio potrebbe essere quello di utilizzare display: flex, disponibile in IE11

Inoltre, assicurati di utilizzare un doctype recente come xhtml o html 5.

— Marco Luglio
fonte

8

blocco di visualizzazione; e margine: 0 auto 0 auto; è abbastanza anche. Grazie!

— Chris

Per centrare verticalmente una tela, non è necessario inserire la larghezza e l'altezza, purché tu lo specifichi nell'HTML. Su Chrome, comunque.

— Zac

1

Larghezza e altezza possono essere specificate in css o html. Ma css è il modo consigliato poiché tutta la logica di presentazione dovrebbe andare lì.

— Marco Luglio

1

Sta centrando la tela, ma se c'è un'immagine disegnata sulla tela, si sta allungando. Riesci a centrare la tela senza allungare l'immagine

— aryan

L'impostazione di altezza e larghezza negli stili in linea sull'elemento canvas ha incasinato le dimensioni delle mie immagini disegnate e simili. Solo un avvertimento che, si spera, salverà qualcuno dalla frustrazione.

— MrBoJangles

52

Puoi dare alla tua tela le proprietà CSS ff:

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

— jinmichaelr
fonte

Puoi fornire un jsfiddle? Questo approccio non sembra funzionare

— jose.angel.jimenez

3

Funziona per il centraggio orizzontale, ma non per il centraggio verticale.

— Matty J

20

Basta centrare il 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>

Basta cambiare l'altezza e la larghezza in qualsiasi cosa e hai un div centrato

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

— JoeCianflone
fonte

Fortunatamente per me, ne avevo bisogno subito dopo averlo pubblicato. :)

— mcandre

5

Questo non funziona se la tela è più piccola del contenitore.

— SystemicPlural

8

Per centrare l'elemento canvas orizzontalmente, è necessario specificarlo come livello di blocco e lasciare le proprietà dei margini sinistro e destro al browser:

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

Se vuoi centrarlo verticalmente, l'elemento canvas deve essere posizionato in modo assoluto:

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

Se vuoi centrarlo orizzontalmente e verticalmente, fai:

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

Per maggiori informazioni visita: https://www.w3.org/Style/Examples/007/center.en.html

— konkret
fonte

5

Le risposte precedenti funzionano solo se la tua tela ha la stessa larghezza del contenitore.

Funziona indipendentemente:

#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>

Espandi lo snippet

— SystemicPlural
fonte

3

Usa questo codice:

<!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>

— Keyur Patel
fonte

2

Ho avuto lo stesso problema, poiché ho immagini con molte larghezze diverse che carico solo con informazioni sull'altezza. L'impostazione di una larghezza consente al browser di allungare e comprimere l'immagine. Risolvo il problema avendo la riga di testo appena prima della riga image_tag centrata (eliminando anche float: left;). Mi sarebbe piaciuto che il testo fosse allineato a sinistra, ma questo è un piccolo inconveniente, che posso tollerare.

— MDM
fonte

0

Aggiungi text-align: center;al tag principale di <canvas>. Questo è tutto.

Esempio:

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

— Raj Yadav
fonte

questo è semplice quindi utilizzare CSS

— Clifton Avil D'Souza