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>