How to center a html 5 canvas with css

MarPlo
Posts: 88

How to center a html 5 canvas with css

I'm trying to center a html 5 canvas using css margin properties.
This is the code, but it doesn't work.

Code: Select all

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Title</title> <style> canvas { margin: 5px auto; border: 1px solid black; background: yellow; } </style> </head> <body> <canvas id="canvas" width="600" height="450"></canvas> </body> </html>

Admin
Make the canvas a block-level element, with: display: block; (by default, canvas is an inline element).
This code works:

Code: Select all

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Title</title> <style> canvas { display: block; margin: 5px auto; border: 1px solid black; background: yellow; } </style> </head> <body> <canvas id="canvas" width="600" height="450"></canvas> </body> </html>

Similar Topics