Como posso centralizar igual o projeto do curso?
Como posso centralizar igual o projeto do curso?
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!