Canvas覆盖Internet Explorer中的页面

Question

Canvas覆盖Internet Explorer中的页面

use*_*627 7 css html5 internet-explorer canvas

我使用以下代码将我的画布居中:

position:absolute;
top:50%;
left:50%;
margin-top:-200px; /* Half of canvas height */
margin-left:-275px; /* Half of canvas width */

Run Code Online (Sandbox Code Playgroud)

它适用于除IE9和10之外的所有浏览器.在Internet Explorer中,它涵盖了整个页面.是否有可能支持IE中的画布居中？

Answer 1

Bro*_*ier 7

使用定心margin: 0 auto;与display: block;支持的-在几乎所有的浏览器工作<canvas>是肯定的.

实例:http://jsbin.com/ovoziv/2

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Centring Canvas</title>
</head>
<body>

  <canvas></canvas>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS

canvas {
  display: block;
  background: #FFFFB7;
  width: 550px;
  height: 400px;
  margin: 0 auto;
}

Run Code Online (Sandbox Code Playgroud)

编辑:更新了垂直居中的答案.这个CSS可以解决这个问题:

canvas {
    background-color: #FFFFB7;
    width: 550px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -275px;
    margin-top: -200px;
}

Run Code Online (Sandbox Code Playgroud)

现在解释.我们首先使用position: absolute设置top和left方式将画布与顶部和左侧的偏移量设置为50%50%.然后,因为你的画布有一个静态的大小,我们增加阴性切缘(其中,当元素不是绝对定位,你不应该这样做)的宽度和大小(550x400/2 = 275x200)的一半:margin-left: -275px; margin-top: -200px;.

画布现在将显示在屏幕的中央.如果你在另一个元素中执行此操作并希望以该元素为中心,请尝试添加position: relative;到该元素,因此它将使用它的边界而不是正文.

这里的实例:http://jsbin.com/ovoziv/6

归档时间：	12 年，7 月前
查看次数：	233 次
最近记录：	12 年，7 月前