En este artículo, estableceremos la alineación del contenido usando JavaScript. La propiedad DOM Style alignContent se usa para alinear los elementos de un contenedor flexible cuando no usan todo el espacio disponible en el eje transversal.
Sintaxis:
object.style.alignContent = "center"
El valor de la propiedad:
- centro: se utiliza para colocar el contenido del texto en el centro del contenedor.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to align flexbox container
into center using JavaScript?
</title>
</head>
<head>
<style>
.main {
width: 250px;
height: 300px;
border: 1px solid;
display: flex;
flex-flow: row wrap;
}
.main div {
width: 250px;
height: 70px;
font-size: 2rem;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>
How to align flexbox container
into center using JavaScript?
</h3>
<p>
Click on button to change the
alignContent to "center"
</p>
<div class="main">
<div style="background-color:green;">
Geeks
</div>
<div style="background-color:lightgreen;">
For
</div>
<div style="background-color:green;">
Geeks
</div>
</div>
<button onclick="changeAlign()">
Change alignContent
</button>
</center>
<script>
function changeAlign() {
document.querySelector('.main')
.style.alignContent = "center";
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
