如何居中所有图层的画布？

欲所有层至中心宽度和top;10px;黄色矩形内侧位置的精确位置和大小。所有的图层包含图层A应该是width:1000px height:500px

我试图做到这一点在许多方面，但除了我的理解。

我知道这是可以做到的，但在我的代码中出现了错误。

我很感激任何帮助。

我的代码：

<!DOCTYPE HTML> 
<html> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title> - jsFiddle demo</title> 
<style type='text/css'> 
body {background-color:black; padding:0; margin:0;            } 
#layers {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; z-index:1; top:10px; background-color:blue; }//contain all layers 
#layerA {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:4; background-color:green; border:1px green solid; left:0; top:0;}//background screen show 
#layerB {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }//Variable animation hidden 
#layerC {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }//Variable animation hidden 
#layerD {position:absolute; width:1000px; height:500px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }//create ball 

#pos{top:50px; left:10px; color:white; font-size:16px;} 
#status{position;absolute; top:10px; left:10px; color:white; font-size:16px;} 
#status1{position;absolute; top:20px; left:10px; color:white; font-size:16px;} 
#fps_count {position: absolute; top: 10px; right: 0px; width:150px; font-size: 20px; 
      color: white; font-family: 'Happy Sans', cursive; border:1px red solid;} 
/* Loading */ 
#loading {position:relative; width:1000px; height:500px; padding:0; margin-left:auto; margin-right:auto; top:10px; background:yellow; z-index:1;} 
#loading #barCont {width: 400px; height: 20px; position: absolute; 
        top: 50%; left: 50%; margin: -10px 0 0 -200px; background: black;} 
#loading #bar {width: 0; height: 20px; position: absolute; left: 0; background: #F3FF67;} 
</style> 
</head> 
<body> 
<div id="loading"> 
    <p id="loadText">Loading...</p> 
    <div id="barCont"></div> 
    <div id="bar"></div> 
</div> 

<div id="layers"> 
    <canvas id="layerA" ></canvas> 
    <canvas id="layerB" ></canvas> 
    <canvas id="layerC" ></canvas> 
    <canvas id="layerD" ></canvas> 
</div> 

<div id="fps_count">71 32 58 FPS</div> 
<div id="pos">pos</div> 
<div id="status">status</div> 
<div id="status1">status1</div> 
<script> 
var WW = 1400,WH = 700,WTH = 1000,HTH = 500; 

var layerA  = document.getElementById('layerA'),//layer background 
    CanvasA  = layerA.getContext('2d'); 
    layerA.width = 300;//width size of image background 
    layerA.height = 150;//height size of image background 

var layerB  = document.getElementById('layerB'),//senvich animation hidden 
    CanvasB  = layerB.getContext('2d'); 
    layerB.width = WW; 
    layerB.height = WH; 

var layerC  = document.getElementById('layerC'),//DEFINE layerBVariable it use as a variable 
    CanvasC  = layerC.getContext('2d'); 
    layerC.width = WW; 
    layerC.height = WH; 

var layerD  = document.getElementById("layerD"),//createball 
    CanvasD  = layerD.getContext('2d');  
    layerD.width = WW; 
    layerD.height = WH; 

    CanvasA.clearRect(0,0,300,150); 
    CanvasA.fillStyle= 'green'; 
    CanvasA.fillRect(0,0,300,150); 

    CanvasB.clearRect(0,0,WW,WH); 
    CanvasB.fillStyle= 'red'; 
    CanvasB.fillRect(0,0,WW,WH); 

    CanvasC.clearRect(0,0,WW,WH); 
    CanvasC.fillStyle= 'brown'; 
    CanvasC.fillRect(0,0,WW,WH); 

    CanvasD.clearRect(0,0,WW,WH); 
    CanvasD.fillStyle= 'azure'; 
    CanvasD.fillRect(0,0,WW,WH);   
</script> 
</body> 
</html>

来源

2013-03-20 user1954217

你是什么意思“定位所有图层到中心宽度”？预期的结果是什么？你看到了什么呢？ – OpherV 2013-03-20 16:52:22

我想查看所有图层黄色正方形的确切位置和尺寸 – user1954217 2013-03-20 16:54:46

要清楚 - 您希望画布元素和黄色图层具有相同的大小并占据相同的位置？基本上覆盖对方？ – OpherV 2013-03-20 16:58:59

看看这个jsFiddle example

首先，// comment不是CSS有效的注释语法。这是扼杀你的代码。请使用/* comments */进行CSS内联评议。

其次，定位你的画布元素，如我想我的要求，我已经包括这船代码：

#layers {position:absolute; width:1000px; height:500px; padding:0; margin-left: -500px; left: 50%; z-index:1; top:10px; background-color:blue; }/*contain all layers*/ 
#layers canvas{width: 200px;} #layerA {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:4; background-color:green; border:1px gre solid; left:0; top:0;}/*background screen show*/ 
#layerB {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:2; background-color:red; border:1px red solid; visibility:hidden; }/*Variable animation hidden*/ 
#layerC {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:3; background-color:brown; border:1px brown solid; display:none; }/*Variable animation hidden*/ 
#layerD {position:absolute; width:1000px; height:500px; top: 0px; left: 0px; padding:0; margin:0; z-index:5; background-color:azure; border:1px azure solid; }/*create ball*/

要居中1000像素宽的绝对定位的元素我已经添加left: 50%; margin-left: -500px。这基本上告诉浏览器将元素的最左边放置在其容器的50％处（在这种情况下是文档体），然后将其左边的宽度的一半（以像素为单位）移动到左边。这使它可以正确定位在中心

FYI-I strong建议您在此处使用类而不是ID来避免重复的，无法读取的CSS代码。

来源

2013-03-20 17:08:36 OpherV

非常感谢....................... – user1954217 2013-03-20 17:15:45

如何居中所有图层的画布？

回答

相关问题