La función center() se usa para establecer la alineación del elemento en el centro, ya sea verticalmente, horizontalmente o ambos, en relación con su elemento principal o de acuerdo con el cuerpo si el elemento no tiene un elemento principal. Si esta función no contiene ningún parámetro, el elemento se alineará tanto vertical como horizontalmente.
Nota: Esta función requiere la biblioteca p5.dom. Así que agregue la siguiente línea en la sección principal del archivo index.html.
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"> </script>
Sintaxis:
center( align )
Parámetros: esta función acepta la alineación de un solo parámetro que contiene la string ‘vertical’ u ‘horizontal’ para alinear el elemento.
Los siguientes ejemplos ilustran la función center() en p5.js:
Ejemplo 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');
}
Producción:
Ejemplo 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');
}
Producción: