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

body { text-align: center; }

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

于 2013-01-23T18:40:16.503 回答