Question

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

Answer 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和canvas的父级的“text-align”属性设置为“center”，因此在这种情况下

body { text-align: center; }

右对齐，同样的技巧，但文本对齐：对，而不是。但是，为了放置目的，最好将h1和canvas元素包装在div中，在div中对齐它们（将text-align分配给div而不是body）然后你可以将div放在任何你想要的位置同时保持h1和画布对齐。

如何在HTML中对齐ProcessingJS草图

1 个答案: