7

このコードを使用してキャンバスを中央に配置しています:

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

IE9 と 10 を除くすべてのブラウザーで完全に機能します。Internet Explorer では、ページ全体をカバーします。IE でキャンバスのセンタリングをサポートすることは可能ですか?

4

1 に答える 1

7

margin: 0 auto;withを使用したセンタリング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>

CSS

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

編集:回答を更新して、垂直方向にも中央揃えにしました。このCSSはトリックを行います：

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

では説明です。最初に、とto をposition: absolute設定して、上部と左側から 50% オフセットしてキャンバスを配置します。次に、キャンバスのサイズが静的であるため、幅とサイズの半分 (550x400/2 = 275x200) に負のマージンを追加します (要素が絶対配置されていない場合は絶対に行わないでください) 。topleft50%margin-left: -275px; margin-top: -200px;

画面中央にキャンバスが表示されます。これを別の要素内で行い、その要素を中央に配置したい場合は、position: relative;その要素に追加してみてください。これにより、本体の境界ではなくその境界が使用されます。

ここのライブ例: http://jsbin.com/ovoziv/6

于 2013-05-27T11:18:29.833 に答える