How to center a html 5 canvas with css

Place to talk about website HTM elements, CSS style and design, and get help with HTML, CSS codes.
MarPlo
Posts: 186

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 Posts: 805
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>