Posição do objeto no Tailwind CSS

Tailwind Object Position é um recurso valioso que permite posicionar com precisão imagens e vídeos dentro do contêiner.

Neste artigo, veremos mais de perto a posição do objeto Tailwind e como você pode usá-la para melhorar o design e a funcionalidade do seu site.

Você pode facilmente mover seu conteúdo de mídia para cima, para baixo, para a esquerda ou para a direita e até mesmo ajustar o posicionamento usando valores exatos.

Posição do objeto de vento de cauda

Índice-

O que é posição de objeto Tailwind?

Tailwind Object Position é uma propriedade CSS que permite definir a posição exata de uma imagem ou vídeo em seu contêiner.

Com Tailwind Object Position, você pode mover seu conteúdo de mídia para cima, baixo, esquerda ou direita, ou até mesmo posicioná-lo em um ponto específico usando valores exatos.

Isso facilita a criação de layouts e designs personalizados para seu site e oferece mais controle sobre como seu conteúdo é exibido.

Classes de posição do objeto Tailwind

Aulas Visão geral
fundo do objeto Usado para definir a posição vertical de uma imagem ou conteúdo de vídeo para o centro inferior de seu contêiner.
objeto-centro Essa classe é usada para centralizar horizontal e verticalmente o conteúdo de uma imagem ou vídeo em seu contêiner.
objeto-esquerda Como resultado, a posição horizontal de uma imagem ou vídeo é definida no centro esquerdo de seu contêiner, mantendo sua proporção.
objeto-esquerda-inferior Essa classe posiciona o conteúdo do elemento no canto inferior esquerdo de seu contêiner.
objeto-esquerda-topo Essa classe é usada para posicionar o conteúdo de um elemento no canto superior esquerdo de seu contêiner.
direito de objeto Essa classe posiciona o conteúdo do elemento no centro à direita de seu contêiner.
objeto inferior direito Essa classe posiciona o conteúdo do elemento no canto inferior direito de seu contêiner.
objeto-topo-direito O conteúdo de um elemento é colocado no canto superior direito de seu contêiner.
topo de objeto Essa classe especifica que o conteúdo do elemento deve ser alinhado ao centro superior de seu contêiner.

Sintaxe

<element class="object-bottom">...</element>

Usar o Tailwind Object Position é direto e simples.

Veja como você pode usá-lo para posicionar seu conteúdo de mídia em seu contêiner.

O exemplo a seguir ilustra o resultado do uso das classes object-left , object-left-top , object-left-bottom , object-top e object-center no Tailwind:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Position class in Tailwind CSS</p>
<div class="flex justify-center">
<img class="object-cover w-48 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div class="bg-gray-300 mx-auto space-y-4 p-2
justify-between items-center grid grid-rows-2 grid-flow-col">
<div class="mt-4">
<p>object-left-top</p>
<img class="object-none object-left-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-left</p>
<img class="object-none object-left w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-left-bottom</p>
<img class="object-none object-left-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-top</p>
<img class="object-none object-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-center</p>
<img class="object-none object-center w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
O exemplo abaixo lança alguma luz sobre o uso das classes object-right, object-right-top, object-right-bottom e object-bottom no Tailwind:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center font-medium">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-2">Object Position class in Tailwind CSS</p>
<div class="flex justify-center">
<img class="object-cover w-48 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div class="bg-gray-300 mx-auto space-y-4 p-2
justify-around items-center grid grid-rows-2 grid-flow-col">
<div class="mt-4">
<p>object-right-top</p>
<img class="object-none object-right-top w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-right</p>
<img class="object-none object-right w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-right-bottom</p>
<img class="object-none object-right-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
<div>
<p>object-bottom</p>
<img class="object-none object-bottom w-32 h-32 border-2 my-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/03/tailwind.webp">
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Benefícios da Posição do Objeto Tailwind

O uso do Tailwind Object Position pode fornecer vários benefícios para o seu site, incluindo:

  • Você pode criar designs exclusivos e personalizados para o seu site e posicionar seu conteúdo de mídia exatamente onde deseja.
  • Ao posicionar seu conteúdo de mídia de uma maneira específica, você pode aprimorar a experiência geral do usuário e tornar seu site mais atraente e interativo.
  • Tailwind Object Position é compatível com todos os principais navegadores da Web, portanto, você não precisa se preocupar com problemas de compatibilidade ou limitações.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.