Skip to content Skip to sidebar Skip to footer
Home / Alignment / Canvas / Center / Html

Cannot Center Align Canvas

Post a Comment
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

Solution 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

Solution 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><linkrel="stylesheet"href="style.css"></head><bodyonLoad="Main();"><canvasid="Shooter">
      Your browser does not support the HTML5 canvas tag.
    </canvas></body></html>

Solution 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">

Post a Comment for "Cannot Center Align Canvas"