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

105

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

— ヨルゲン
ソース

サイズを変更するときにサイズを指定したり、スクロールバーを使用したりせずに、ページ全体のキャンバスを作成するように指示するにはどうすればよいですか？

— ヨルゲン

2

HTMLで実行しないでください.. JavaScriptで実行し、appendChildなどを使用して、幅と高さをwindow.innerWidthおよびwindow.innerHeightに設定します

— JinX

173

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

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

編集する

この回答は非常に人気があるため、もう少し詳しく説明します。

上記のプロパティは、キャンバス、div、または親を基準にして持っている他のノードを水平方向に中央揃えにします。上部または下部のマージンとパディングを変更する必要はありません。幅を指定して、ブラウザに残りのスペースを自動マージンで埋めます。

ただし、lessと入力したい場合は、次のような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何も見つからない場合、または身体。

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

また、xhtmlやhtml 5などの最新のdoctypeを使用してください。

— マルコ・ルリオ
ソース

8

表示ブロック; そしてmargin：0 auto 0 auto; また十分です。どうも！

— Chris

キャンバスを垂直方向に中央揃えにするために、HTMLで指定する限り、幅と高さを入力する必要はありません。とにかく、クロム。

— Zac

1

幅と高さはcssまたはhtmlで指定できます。ただし、すべてのプレゼンテーションロジックをそこに配置する必要があるため、cssが推奨されます。

— Marco Luglio

1

キャンバスの中央に配置されていますが、キャンバスに描画されたイメージがある場合、それは引き伸ばされています。画像を引き伸ばさずにキャンバスを中央に配置できるか

— aryan

canvas要素のインラインスタイルで高さと幅を設定すると、描画した画像などのサイズがめちゃくちゃになりました。うまくいけば、誰かの不満を解消できるだけの警告です。

— MrBoJangles 2018

52

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

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

— ジンミシェル
ソース

jsfiddleを提供できますか？このアプローチは機能していないようです

— jose.angel.jimenez

3

これは、水平方向の中央揃えでは機能しますが、垂直方向の中央揃えでは機能しません。

— Matty J 2017

20

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/

— JoeCianflone
ソース

幸運なことに、あなたが投稿した直後にこれが必要になりました。:)

— mcandre 2011年

5

キャンバスがコンテナよりも小さい場合、これは機能しません。

— SystemicPlural 2015年

8

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

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をご覧ください。

— コンクレ
ソース

5

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

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

#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>

スニペットを展開

— 全身
ソース

3

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

<!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>

— Keyur Patel
ソース

2

高さ情報だけでロードするさまざまな幅の写真があるので、同じ問題が発生しました。幅を設定すると、ブラウザが画像を引き伸ばして絞ることができます。image_tag行の直前にテキスト行を配置することで問題を解決します（float：も削除されます;）。私はテキストをそのままにしておくことを望みましたが、これは許容できる軽微な不便です。

— MDM
ソース

0

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

例：

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

— ラージ・ヤダブ
ソース

これはcssを使用して簡単です

— Clifton Avil D'Souza