首页 新闻 会员 周边 捐助

html5中canvas居中的问题

0
悬赏园豆：5 [已解决问题] 解决于 2016-05-18 17:05 
 1 <!DOCTYPE html>
 2 <html>
 3 <!-- JavaScript脚本 -->
 4 <script type="text/JavaScript">
 5     var c=document.getElementById("can_sle");
 6     var ctx=c.getContext("2d");
 7     ctx.fillStyle="#000000";
 8     ctx.fillRect(0,0,300,75);
 9 }
10 </script>
11 <!-- css样式表 -->
12 <style type="text/css">
13     #can_sle{
14         
15         background-color:#79FF79;
16         margin-left: auto;
17         margin-right: auto;
18 
19     }
20     .header_h1{
21         color:#FF0000;
22         
23     }
24     .nav_h2{
25         
26     }
27 </style>
28 <meta charset="utf-8">
29 <body class="body_cla">
30     <header>
31         <h1 class="header_h1">淘宝疯了</h1>
32     </header>
33     <nav>
34         <canvas id="can_sle" width="700" height="80" style="border:1px solid #79FF79;">
35             <h2 class="nav_h2">
36                 <a href="" >首页</a>|
37                 <a href="" >导航</a>|
38                 <a href="" >购物</a>|
39                 <a href="" >抽奖</a>|
40                 <a href="" >帮助</a>|
41                 <a href="" >活动</a>|
42                 <a href="" >论坛</a>|
43                 <a href="" >客服</a>
44             </h2>
45         </canvas>
46     </nav>
47     <article>
48         <h1>article</h1>
49     </article>
50     <aside>
51         <h1>article</h1>
52     </aside>
53     <footer>
54         <h1>footer</h1>
55     </footer>
56 </body>
57 </html>

然后现在是这样,canvas在左边我想让它剧中的

cocoyoona的主页 cocoyoona | 初学一级 | 园豆：20
提问于：2016-05-18 16:51
< >
分享
最佳答案
0

父容器width: 100%; aligh: center;

收获园豆：5
RosonJ | 老鸟四级 |园豆：4910 | 2016-05-18 16:53

<canvas id="can_sle" width="700" height="80" style="border:1px solid #79FF79;">

这一行宽度写百分比到了页面上会自己变成100px的样子,

cocoyoona | 园豆：20 (初学一级) | 2016-05-18 16:55

@眉间剪水泛千愁: 

父容器..不是自己

RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 16:56

@RosonJ: nav?

cocoyoona | 园豆：20 (初学一级) | 2016-05-18 16:57

@眉间剪水泛千愁: 

對

RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 16:57

@RosonJ: 

 1 <style type="text/css">
 2     #nav_id{
 3         width:100%;
 4         align:center;
 5     }
 6     #can_sle{
 7         
 8         background-color:#79FF79;
 9         align:center;
10 
11     }
12     .header_h1{
13         color:#FF0000;
14         
15     }
16     .nav_h2{
17         
18     }
19 </style>
20 <meta charset="utf-8">
21 <body class="body_cla">
22     <header>
23         <h1 class="header_h1">淘宝疯了</h1>
24     </header>
25     <nav id="nav_id">

不行

cocoyoona | 园豆：20 (初学一级) | 2016-05-18 16:59

@眉间剪水泛千愁: 

width: 100%; text-align: center;

可以

RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 17:00

@RosonJ: 我上面设置了呀,你看nav有id,它的id里设置了但是页面没有反应

cocoyoona | 园豆：20 (初学一级) | 2016-05-18 17:00

@眉间剪水泛千愁: 

寫錯了，仔細看

RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 17:01

@RosonJ: 找到答案了,是这个

1 #can_sle{
2         
3         background-color:#79FF79;
4         display:block;
5         margin:0 auto;
6     }
cocoyoona | 园豆：20 (初学一级) | 2016-05-18 17:05
其他回答(2)
0

<div style='width:800px;margin:0 auto;'>

<canvas>

</canvas>

</div>

丰叔(◕ˇ◞◟ˇ◕) | 园豆：209 (菜鸟二级) | 2016-05-18 16:57

我木有写 div的

支持(0) 反对(0) cocoyoona | 园豆：20 (初学一级) | 2016-05-18 16:59
0 
#can_sle{
         background-color:#79FF79;
         margin-left: auto;
         margin-right: auto;
 　　　　　aligh: center;
     }

 

小光 | 园豆：1766 (小虾三级) | 2016-05-18 17:00

me反应

支持(0) 反对(0) cocoyoona | 园豆：20 (初学一级) | 2016-05-18 17:01

@眉间剪水泛千愁: 

#can_sle{
         background-color:#79FF79;
         margin-left: 100px;
         margin-right: auto;
     }
支持(0) 反对(0) 小光 | 园豆：1766 (小虾三级) | 2016-05-18 17:02

騙豆阿..　

支持(0) 反对(0) RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 17:02

@RosonJ: 胡扯

支持(0) 反对(0) 小光 | 园豆：1766 (小虾三级) | 2016-05-18 17:03

@小光: 

不胡扯，實測無效，別想矇

支持(0) 反对(0) RosonJ | 园豆：4910 (老鸟四级) | 2016-05-18 17:04

@RosonJ: 长时间不写，回答错了再改不行？

支持(0) 反对(0) 小光 | 园豆：1766 (小虾三级) | 2016-05-18 17:08
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。