如何在 HTML 中对齐 ProcessingJS 草图答案

【问题标题】：How to align ProcessingJS sketches in HTML如何在 HTML 中对齐 ProcessingJS 草图
【发布时间】：2013-01-06 17:39:21
【问题描述】：

我是 Processing.js 和 HTML 的初学者，我想将我的草图与页面的两侧对齐。如何将放置在canvas 中的ex.pde 草图向左、向右或居中对齐？

这是 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>

【问题讨论】：

标签： html canvas alignment processing processing.js

【解决方案1】：

如果我们使用的是正确的 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 和画布的父级的“文本对齐”属性设置为“居中”，所以在这种情况下

body { text-align: center; }

右对齐，同样的技巧，但是 text-align: right ，而不是。但是，出于放置目的，最好将 h1 和 canvas 元素包装在一个 div 中，在该 div 内对齐它们（将 text-align 分配给该 div 而不是 body），然后您可以将该 div 放置在您想要的任何位置，同时保持h1 和画布对齐。

【讨论】：