按钮集中在帆布 [英] Buttons centered over canvas
问题描述
在这张画布上，我想覆盖四个HTML / CSS按钮一个在画布中心的列（用于游戏菜单）。我是CSS和HTML的新手，我还不能找出如何让按钮居中在绝对定位的画布。我怎样才能做到这一点？谢谢。
HTML：
< body&
< canvas id =canvas0width = 800 height = 600>< / canvas>
< canvas id =canvas1width = 800 height = 600>< / canvas>
< canvas id =canvas2width = 800 height = 600>< / canvas>
< canvas id =canvas3width = 800 height = 600>< / canvas>
< / body>
CSS：
code>＃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;
}
编辑：
这里是我想知道如何做的图纸。
第二次编辑：
如果我决定水平居中（而不是坚持垂直和
这篇文章帮了我很多：相对定位中的绝对定位
这是我的最终代码， href =http://jsfiddle.net/FV2NL/ =nofollow noreferrer> jsfiddle 演示。
< body>
< div id =container>
< canvas id =canvas0width = 800 height = 600>< / canvas>
< canvas id =canvas1width = 800 height = 600>< / canvas>
< canvas id =canvas2width = 800 height = 600>< / canvas>
< canvas id =canvas3width = 800 height = 600>< / canvas>
< div id =menu>
< button id =button1type =button>开始< / button>
< button id =button2type =button>选项< / button>
< button id =button3type =button>高分< / 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;
}
这。
这里是一个 jsfiddle 演示
附加此css
.buttonContainer {
position ：绝对
top：40％;
left：45％;
width：80px;
}
.class ='but'{
float：left;
}
HTML
< body>
< canvas id =canvas0width = 800 height = 600>< / canvas>
< canvas id =canvas1width = 800 height = 600>< / canvas>
< canvas id =canvas2width = 800 height = 600>< / canvas>
< canvas id =canvas3width = 800 height = 600>< / canvas>
< div class ='buttonContainer'>
< input class ='but'id ='but1'type ='button'value ='Button 1'>
< input class ='but'id ='but2'type ='button'value ='Button 2'>
< input class ='but'id ='but3'type ='button'value ='Button 3'>
< input class ='but'id ='but4'type ='button'value ='Button 4'>
< / div>
< / body>
I have 4 overlapping canvases (acting as layers) positioned absolutely and centered horizontally and vertically.
Over this canvas, I want to overlay four HTML/CSS buttons in a column in the center of the canvas (for a game menu). I'm new to CSS and HTML and I haven't been able to figure out how to get the buttons centered over the absolutely positioned canvas. How can I do that? Thank you.
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 drawing of what I would like to know how to do. Buttons that stay centered on the center of the canvas, no matter how the browser is resized.
Second edit: If I settle for horizontal centering (instead of insisting on both vertical and horizontal centering), I can do it very nicely.
This article helped me very much: Absolute Positioning Inside Relative Positioning
Here is my final code, and a jsfiddle demo.
<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;
}
Maybe something along the lines of this.
here is a jsfiddle for a demo
append this css
.buttonContainer{
position: absolute;
top: 40%;
left:45%;
width:80px;
}
.class='but' {
float:left;
}
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>
<div class='buttonContainer'>
<input class='but' id='but1' type='button' value='Button 1'>
<input class='but' id='but2' type='button' value='Button 2'>
<input class='but' id='but3' type='button' value='Button 3'>
<input class='but' id='but4' type='button' value='Button 4'>
</div>
</body>
这篇关于按钮集中在帆布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
