Início / coding / Perguntas / 77878717
Accepted
XM01 - stands with Palestine
Asked: 2024-01-25 17:14:11 +0800 CST

Como centralizar o texto vertical e horizontalmente em uma imagem?

  • 772

Estou trabalhando em um componente React usando Tailwind CSS e estou tentando obter um layout específico. Eu tenho um divcom uma imagem e dois parágrafos dentro dela. Quero que os parágrafos sejam centralizados horizontal e verticalmente divpara que apareçam no centro da imagem.

Aqui está meu código atual:

<div className="flex flex-col items-center justify-center text-center">
  <img src="img/slider1.png" alt="slider1" className="mb-4" />
  <p className="font-bold">This paragraph is full of cats</p>
  <p>This paragraph is not.</p>
</div>

Saída de código

Apesar de usar items-centere justify-center, o texto não está alinhado exatamente no centro da imagem. Quero que ambos os parágrafos sejam posicionados no centro, tanto horizontal quanto verticalmente, dentro do arquivo div.

Quaisquer sugestões ou correções à minha abordagem atual seriam muito apreciadas. Obrigado!

html

2 respostas

  1. Best Answer
    1. Envolva sua imagem e parágrafos
    2. Use posicionamento absoluto para os parágrafos
    3. Centralize o texto horizontal e verticalmente.

    <div className="relative">
  <img src="img/slider1.png" alt="slider1" />
  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
    <p className="font-bold mb-2">This paragraph is full of cats</p>
    <p>This paragraph is not.</p>
  </div>
</div>

    • 3

  2. Você pode alterar seu código assim. Use um div para envolvê-lo.

    <div className="flex flex-col items-center justify-center h-screen">
  <img src="img/slider1.png" alt="slider1" className="mb-4" />
  <div className="flex flex-col items-center text-center">
    <p className="font-bold">This paragraph</p>
    <p>This is another paragraph.</p>
  </div>
</div>

    Adicione h-screenao div externo para garantir que ele ocupe toda a altura da janela de visualização.

    Use também um adicional divpara centralizar os parágrafos tanto horizontal quanto verticalmente.

    • 0

relate perguntas