如何在HTML中對齊ProcessingJS草圖

我是Processing.js和HTML的初學者，我想將我的草圖對齊到頁面的兩側。如何將canvas中的ex.pde草圖對齊到左側，右側或中間？如何在HTML中對齊ProcessingJS草圖

下面是HTML代碼：如果我們使用正確的HTML5

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

來源

2013-01-23 forochelian

，我們需要改變這一點的代碼。

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

（加入meta標籤，鏈接不打烊，有腳本標籤流氓支架，而你又在H1的過時的樣式屬性）。

現在h1和畫布左齊平。對準他們中心意味着你要設置「文本對齊」屬性的H1和帆布爲「中心」的父母，所以在這種情況下

body { text-align: center; }

到右對齊，同樣的伎倆，但文本的相反：正確的。但是，爲了放置目的，最好將h1和canvas元素包裝在div中，將它們對齊到div中（將文本對齊分配給該div而不是body），然後可以將div放在任何位置，同時保留h1和畫布對齊。

來源

2013-01-23 18:40:16

如何在HTML中對齊ProcessingJS草圖

回答

相關問題