I have 4 overlapping canvases (acting as layers) located absolutely and centered horizontally and vertically.
In this canvas, I want to overlay four HTML / CSS buttons in a column in the center of the canvas (for the game menu). I'm new to CSS and HTML, and I couldn't figure out how to get the buttons to center on an absolutely positioned canvas. How can i do this? Thank.
HTML:
<body>
<canvas id="canvas0" width=800 height=600></canvas>
<canvas id="canvas1" width=800 height=600></canvas>
<canvas id="canvas2" width=800 height=600></canvas>
<canvas id="canvas3" width=800 height=600></canvas>
</body>
CSS
#canvas0, #canvas1, #canvas2, #canvas3 {
position: absolute;
border: 2px solid;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
display: block;
}
#canvas0 {
z-index: 0;
}
#canvas1 {
z-index: 1;
}
#canvas2 {
z-index: 2;
}
#canvas3 {
z-index: 3;
}
Edit:
Here is a picture of what I would like to know how to do this. Buttons that remain centered on the center of the canvas, regardless of how the browser is resized.
Second edit: If I agree to horizontal centering (instead of insisting on vertical and horizontal centering), I can do it very well.
:
jsfiddle .
<body>
<div id="container">
<canvas id="canvas0" width=800 height=600></canvas>
<canvas id="canvas1" width=800 height=600></canvas>
<canvas id="canvas2" width=800 height=600></canvas>
<canvas id="canvas3" width=800 height=600></canvas>
<div id="menu">
<button id="button1" type="button">Start</button>
<button id="button2" type="button">Options</button>
<button id="button3" type="button">High Scores</button>
</div>
</div>
</body>
CSS
#container {
width: 800px;
height: 600px;
margin: 0 auto;
position: relative;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
#cavas0 {z-index: 0;}
#canvas1 {z-index: 1;}
#canvas2 {z-index: 2;}
#canvas3 {z-index: 3;}
#menu {
position: relative;
width: 250px;
height: 200px;
z-index: 4;
top: 200px;
left: 275px;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
position: absolute;
z-index: 5;
}
#button1 {
left: 25px;
}
#button2 {
left: 25px;
top: 75px;
}
#button3 {
left: 25px;
top: 150px;
}