p5.js | center()函数

center()函数用于将元素的对齐方式设置为垂直、水平或两者都相对于其父元素或如果元素没有父元素则根据主体。如果此函数不包含任何参数，则元素将垂直和水平对齐。

注意：此函数需要 p5.dom 库。因此，在 index.html 文件的 head 部分添加以下行。

句法：

center( align )

参数：此函数接受单个参数align ，其中包含字符串“vertical”或“horizontal”以对齐元素。

以下示例说明了 p5.js 中的 center()函数：

示例 1：

function setup() {
      
    // Create canvas of given size
    createCanvas(1000, 200);
      
    // Set background color
    background('green');
      
    var div = createDiv('').size(200, 70);
      
    div.html('Welcome to GeeksforGeeks', true);   
    
    // Set the position of div into center
    div.center();
    
    // Set font-size of text
    div.style('font-size', '24px');
    
    // Set font-color of text
    div.style('color', 'white');
    
    div.style('border', '1px solid white');
    
    div.style('text-align', 'center');
  
} 

输出：

示例 2：

function setup() {
      
    // Create canvas of given size
    createCanvas(1000, 200);
      
    // Set background color
    background('green');
      
    // Create an input element
    var input_val = createInput('');    
      
    // Set the attribute and its value    
    input_val.attribute('value', 'Welcome to GeeksforGeeks');     
    
    // Set the position of div into center
    input_val.center();
    
    // Set font-size of text
    input_val.style('font-size', '24px');
      
    // Set the width of input area
    input_val.style('width', '300px');
  
} 

输出：