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>

Adv. Posts: 01

Similar Topics