Esta clase acepta muchos valores en Tailwind CSS . Es la alternativa a la propiedad CSS Place Content . Esta clase se utiliza para controlar cómo se justifica y alinea el contenido al mismo tiempo. Para establecer los valores de múltiples propiedades en una sola clase. Aquí, la clase de contenido de lugar puede contener el valor de los valores de clase de contenido de alineación y contenido de justificación .
Colocar clases de contenido:
- lugar-contenido-centro
- lugar-contenido-inicio
- lugar-contenido-fin
- colocar-contenido-entre
- colocar-contenido-alrededor
- colocar-el-contenido-de manera uniforme
- colocar-contenido-extender
place-content-center: Esta clase alinea elementos flexibles en el centro del contenedor.
Sintaxis:
<element class="place-content-center">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-center h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content-start: esta clase alinea los elementos flexibles al comienzo del contenedor.
Sintaxis:
<element class="place-content-start">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-start h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content-end: esta clase alinea elementos flexibles al final del contenedor.
Sintaxis:
<element class="place-content-end">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-end h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content- between: esta clase distribuye el espacio de las líneas flexibles con el mismo espacio entre ellas.
Sintaxis:
<element class="place-content-between">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-between h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content-around: esta clase distribuye el espacio equitativamente alrededor de las líneas flexibles.
Sintaxis:
<element class="place-content-around">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-around h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content-evenly: esta clase define la posición con el mismo espacio entre ellos, pero el espacio desde las esquinas es diferente.
Sintaxis:
<element class="place-content-evenly">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-evenly h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4 h-12">1</div> <div class="bg-green-800 w-3/4 h-12">2</div> <div class="bg-green-700 w-3/4 h-12">3</div> <div class="bg-green-600 w-3/4 h-12">4</div> <div class="bg-green-500 w-3/4 h-12">5</div> <div class="bg-green-400 w-3/4 h-12">6</div> </div> </body> </html>
Producción:
place-content-stretch: Esta clase define la línea estirada para tomar el espacio restante del contenedor flexible. Es el valor predeterminado.
Sintaxis:
<element class="place-content-evenly">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Place Content Class</b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-content-stretch h-48 bg-green-200 border-solid border-4 border-green-900"> <div class="bg-green-900 w-3/4">1</div> <div class="bg-green-800 w-3/4">2</div> <div class="bg-green-700 w-3/4">3</div> <div class="bg-green-600 w-3/4">4</div> <div class="bg-green-500 w-3/4">5</div> <div class="bg-green-400 w-3/4">6</div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA