Cómo centrar el lienzo en html5

Question

He estado buscando una solución por un tiempo, pero no he encontrado nada. Tal vez solo sean mis términos de búsqueda. Bueno, estoy tratando de hacer que el lienzo se centre de acuerdo con el tamaño de la ventana del navegador. El lienzo es 800x600. Y si la ventana se pone por debajo de 800x600, se debe cambiar el tamaño también (pero eso no es muy importante en este momento)

Answer 1

Sólo centrar el 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> 

Sólo cambia la altura y anchura a lo y usted tiene un div centrado

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

Answer 2

Dar el lienzo las siguientes propiedades de estilo CSS:

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

---

Editar

Dado que esta respuesta es bastante popular, permítanme añadir un poco más detalles.

Las propiedades anteriores serán horizontalmente centra el lienzo, div o cualquier otro nodo que tengas relativo a su elemento primario. No es necesario cambiar los márgenes y los rellenos superiores o inferiores. Usted especifica un ancho y deja que el navegador llene el espacio restante con los márgenes automáticos.

Sin embargo, si desea escribir menos, se puede usar cualquier forma abreviada css propiedades que desea, como

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

de centrado del lienzo verticalmente requiere un enfoque diferente sin embargo. Necesita usar posicionamiento absoluto, y especificar tanto el ancho como la altura. A continuación, establezca las propiedades izquierda, derecha, superior e inferior en 0 y deje que el navegador llene el espacio restante con los márgenes automáticos.

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

El lienzo se centrará en sí basándose en el primer elemento padre que tiene position conjunto de relative o absolute, o el cuerpo si no se encuentra ninguno.

Otro enfoque sería utilizar display: flex, que está disponible en EI11

También, asegúrese de usar un tipo de documento reciente como XHTML o HTML 5.

Answer 3

he tenido el mismo problema, como lo tener imágenes con muchos anchos diferentes que solo cargo con información de altura. Establecer un ancho permite que el navegador se estire y exprima la imagen. Resuelvo el problema haciendo que la línea de texto quede justo antes de que la línea image_tag se centre (también se deshace de float: left;). Me hubiera gustado que el texto se dejara alineado, pero esta es una inconveniencia menor, que puedo tolerar.

Answer 4

Usted puede dar a su lienzo las propiedades CSS ff:

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

Answer 5

Las respuestas anteriores sólo funcionan si el lienzo es la misma anchura que el contenedor.

Esto funciona independientemente:

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