web-dev-qa-db-ja.com

html5でキャンバスを中央に配置する方法

しばらくの間、解決策を探していましたが、何も見つかりませんでした。たぶんそれはただの検索用語だ。さて、ブラウザウィンドウのサイズに合わせてキャンバスを中央に配置しようとしています。キャンバスは800x600です。また、ウィンドウが800x600未満になると、ウィンドウのサイズも変更する必要があります（ただし、現時点ではそれほど重要ではありません）

html5htmlcanvascss3resize
96
jorgen

キャンバスに次のcssスタイルプロパティを指定します。

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

編集

この回答は非常に人気があるため、もう少し詳細を追加します。

上記のプロパティはhorizo​​ntallyキャンバス、div、または親に関連する他のノードを中央に配置します。上部または下部のマージンとパディングを変更する必要はありません。幅を指定して、ブラウザに残りのスペースを自動マージンで埋めます。

ただし、入力を少なくしたい場合は、次のような任意のcss略記プロパティを使用できます。

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

ただし、キャンバスの中央揃え垂直では、別のアプローチが必要です。絶対配置を使用し、幅と高さの両方を指定する必要があります。次に、left、right、top、およびbottomプロパティを0に設定し、ブラウザーに残りのスペースを自動マージンで埋めます。

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

キャンバスは、positionがrelativeまたはabsoluteに設定されている最初の親要素、または見つからない場合は本文に基づいて中央に配置されます。

別のアプローチは、IE11で利用可能なdisplay: flexを使用することです

また、xhtmlやhtml 5などの最近のdoctypeを使用していることを確認してください。

155
Marco Luglio

キャンバスにff CSSプロパティを与えることができます：

#myCanvas
{
    display: block;
    margin: 0 auto;
}
44
jinmichaelr

DivをHTMLの中央に配置します。

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }


<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

高さと幅を任意に変更するだけで、中央のdivが得られます

http://jsfiddle.net/BVghc/2/

20
JoeCianflone

上記の回答は、キャンバスがコンテナと同じ幅である場合にのみ機能します。

これは関係なく動作します：

#container {
  width: 100px;
  height:100px;
  border: 1px solid red;
  
  
  margin: 0px auto;
  text-align: center;
}

#canvas {
  border: 1px solid blue;
  width: 50px;
  height: 100px;
  
}
<div id="container">
  <canvas id="canvas" width="100" height="100"></canvas>
</div>
5
SystemicPlural

このコードを使用してください：

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>
3
Keyur Patel

キャンバス要素を水平方向の中央に配置するには、ブロックレベルとして指定し、その左と右のマージンプロパティをブラウザに残す必要があります。

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

垂直方向に中央に配置する場合は、キャンバス要素を絶対に配置する必要があります。

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

水平方向と垂直方向に中央に配置する場合は、次を実行します。

canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);               
}

詳細情報をご覧ください： https://www.w3.org/Style/Examples/007/center.en.html

3
Konkret

私は同じ問題を抱えています。高さ情報だけで読み込む幅の異なる写真がたくさんあるからです。幅を設定すると、ブラウザは画像を引き伸ばして圧縮することができます。この問題を解決するには、image_tag行の直前にテキスト行を配置します（float：left;も削除します）。テキストを左揃えにするのが良かったのですが、これはささいな不便さです。

2
MDM

text-align: center;の親タグに<canvas>を追加します。それでおしまい。

例：

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>
0
Raj Yadav