Geek Answers Handbook

Cannot center canvas alignment

I searched for search queries to no avail. I just want center-alignmy canvas. I tried float="center", text-align="center", margin-top: 100px but my scene is not even the center of the browser. Any help is appreciated.

<body onLoad="Main();">
<canvas id="Shooter" width="320" height="480" align="center">
Your browser does not support the HTML5 canvas tag.
</canvas>

+4
source share
3 answers

You can center it by:

#Shooter {
  margin: auto;
  display: block;
}

Make sure the parent container is 100% wide.

Here is the pen. http://codepen.io/asim-coder/pen/aNpWoB

+6
source

Käsebrot, html- css style.css html "head" rel="stylesheet" href="style.css", cvas canvas. , .

canvas#Shooter {
    
  margin: 0 auto;
  display: block;
  width: 320px;
  height: 480px;
        
}
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="style.css"> 
  </head>

  <body onLoad="Main();">
    <canvas id="Shooter">
      Your browser does not support the HTML5 canvas tag.
    </canvas>
  </body>

</html>
Hide result
+3

I suggest removing tags width, heightand alignfrom the canvas. Instead, add a style area to your html and define a css style for the canvas:

<style>
    canvas {
        padding-left: 0;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 320px;
        height: 480px;
    }
</style>

Your canvas will look like this:

<canvas id="Shooter">
+2
source

More articles:


All Articles