1

私は Processing.js と HTML の初心者で、スケッチをページの端に揃えたいと思っています。ex.pdeこのスケッチcanvasを左、右、または中央に配置するにはどうすればよいですか?

HTMLコードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
    <title>EXAMPLE</title>
    <script>src="processing-1.4.1.js"></script>
  </head>
  <body>
    <h1 align="center">Sine Wave to Infinity</h1>
    <canvas  data-processing-sources="ex.pde"></canvas>
  </body>
</html>
4

1 に答える 1

0

適切な HTML5 を使用している場合は、このコードを少し変更する必要があります。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css" type="text/css">
    <title>example</title>
    <script src="processing-1.4.1.js"></script>
  </head>
  <body>
    <h1>Sine Wave to Infinity</h1>
    <canvas data-processing-sources="ex.pde"></canvas>
  </body>
</html>

(メタ タグを追加しました。リンクが閉じていません。スクリプト タグに不適切なブラケットがあり、h1 に廃止されたスタイル属性がありました)。

これで、h1 とキャンバスが左側で同じ高さになりました。それらを中央に揃えるということは、h1 とキャンバスの両方の親の "text-align" プロパティを "center" に設定することを意味するため、この場合は

body { text-align: center; }

右に配置するには、同じトリックですが、代わりに text-align: right を使用します。ただし、配置の目的で、h1 とキャンバス要素を div でラップし、それらをその div 内に配置して (body ではなくその div に text-align を割り当てます)、その div を保持しながら必要な場所に配置することをお勧めします。 h1 とキャンバスを揃えます。

于 2013-01-23T18:40:16.503 に答える