Posición del objeto CSS Tailwind

Esta clase acepta más de un valor en Tailwind CSS. Todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad object-position de CSS . Esta clase se utiliza para especificar cómo se posiciona un elemento de imagen o video con las coordenadas x/y dentro de su cuadro de contenido. También controla el reemplazo del posicionamiento del contenido del elemento dentro de su contenedor.

Clases de posición de objeto:

  • object-left-top: Se posiciona en la parte superior izquierda de la imagen o video.
  • object-top: Se posiciona en la parte superior de la imagen o video.
  • object-right-top:  Se posiciona en la parte superior derecha de la imagen o video.
  • object-left:  Se posiciona a la izquierda de la imagen o video.
  • object-center:  Se posiciona en el centro de la imagen o video.
  • object-right: Se posiciona a la derecha de la imagen o video.
  • object-left-bottom: Se posiciona en la parte inferior izquierda de la imagen o video.
  • object-bottom:  Se posiciona en la parte inferior de la imagen o video.
  • object-right-bottom:  Se coloca en la parte inferior derecha de la imagen o video.

Nota: Todas las clases se utilizan en el siguiente ejemplo.

Ejemplo:

HTML

<!DOCTYPE html>
<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 Object Position Class</b>
    <div class="bg-green-300 
                mx-16
                space-y-4
                p-2
                justify-between
                grid grid-rows-3 
                grid-flow-col">
      <img
        title="object-left-top"
        class="object-none object-left-top bg-gree-200 w-24 h-24 border-4 my-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
      <img
        title="object-left"
        class="object-none object-left bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
      <img
        title="object-left-bottom"
        class="object-none object-left-bottom bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
  
      <img
        title="object-top"
        class="object-none object-top bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
      <img
        title="object-center"
        class="object-none object-center bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
      <img
        title="object-bottom"
        class="object-none object-bottom bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
  
      <img
        title="object-right-top"
        class="object-none object-right-top bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
      <img
        title="object-right"
        class="object-none object-right bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
  
      <img
        title="object-right-bottom"
        class="object-none object-right-bottom bg-gree-200 w-24 h-24 border-4"
        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190807114330/GFG115.png">
    </div>
  </body>
</html>

Salida: puede pasar el cursor sobre la imagen de salida, cada imagen mostrará su posición de objeto en la información sobre herramientas.

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *