1
resposta

[Sugestão] Problema visual

Como posso centralizar igual o projeto do curso? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá Mauricio! Tudo bem?

Para centralizar o formulário de login na tela, como no projeto do curso que você está seguindo, você pode utilizar as classes de utilidade do Tailwind CSS, que é um framework de CSS utilizado pelo Laravel Breeze para estilização.

Aqui está um exemplo de como você pode ajustar o código da sua view Blade para centralizar o formulário:

1 - Abra o arquivo da view que contém o formulário de login. Normalmente, ele estará localizado em resources/views/auth/login.blade.php.

2 - Envolva o formulário com um container div e aplique classes de flexbox do Tailwind para centralizar o conteúdo. Você pode usar as classes flex, justify-center, e items-center para alinhar horizontal e verticalmente, e min-h, por exemplo, para definir uma altura mínima.

Aqui está um exemplo de como o código pode ficar:

<div class="flex justify-center items-center min-h-screen">
    <div class="w-full max-w-md">
        <!-- Seu formulário de login aqui -->
    </div>
</div>

Neste exemplo, min-h-screen faz com que o container externo tenha no mínimo a altura da tela, flex ativa o display flex, justify-center centraliza horizontalmente, e items-center centraliza verticalmente. O w-full na div interna faz com que ela ocupe toda a largura do container pai, e max-w-md define uma largura máxima moderada para o formulário, para que ele não fique muito largo em telas grandes.

Não se esqueça de executar o npm run dev ou npm run prod após fazer as alterações para compilar os assets e aplicar o novo estilo.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software