cannot center align canvas

问题

I Have been googling for solutions to no avail. I just want to center-align my canvas. I have tried float="center", text-align="center", margin-top: 100px but my stage didnt align center in 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>

回答1:

You could center align it by:

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

Make sure the parent container have 100% width.

Here's a pen. http://codepen.io/asim-coder/pen/aNpWoB

回答2:

I agree with Käsebrot you should separate your html coding from your css, and open style.css file and connect it to your html page in the 'head' section link rel="stylesheet" href="style.css" and then give your canvas css properties. To center the canvas you only need the give values to the margin and display attributes.

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>

回答3:

I suggest you remove the width, height and align tags from canvas. Instead add a style region to your html and define a css-style for canvas:

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

Your canvas would look like this:

<canvas id="Shooter">

来源：https://stackoverflow.com/questions/36055910/cannot-center-align-canvas

标签

html

canvas

alignment

center