Olá amigos front-end, como já sabemos, hoje em dia com a importância de um site responsivo precisamos sempre desenvolver pensando em diversos tamanhos de telas, mantendo sempre o mesmo conteúdo.
Em alguns casos nos deparamos com algumas situações, onde o conteúdo não fica bem alinhado, principalmente quando precisamos centralizar a altura, as vezes definir a altura de um elemento resolve nossos problemas, mas como acabar com o espaço em branco, centralizando o conteúdo pela altura? Veja a dica a seguir:
No HTML:
Criamos um cabeçalho de exemplo (classe "topo") e dentro dele temos mais 2 elementos, uma div (area-interna) e o nosso logo, nenhum segredo até aqui...
Em alguns casos nos deparamos com algumas situações, onde o conteúdo não fica bem alinhado, principalmente quando precisamos centralizar a altura, as vezes definir a altura de um elemento resolve nossos problemas, mas como acabar com o espaço em branco, centralizando o conteúdo pela altura? Veja a dica a seguir:
No HTML:
Criamos um cabeçalho de exemplo (classe "topo") e dentro dele temos mais 2 elementos, uma div (area-interna) e o nosso logo, nenhum segredo até aqui...
<body>
<header class="topo">
<div class="area-interna">
<img src="../googlelogo_color_272x92dp.png" alt="Google" />
</div>
</header>
</body>
No CSS:
Aqui começa a magia, para nossa classe .topo atribuímos os valores 100vh na altura, fazendo com que o elemento no caso header ocupe toda a tela, mesmo em diferentes dispositivos, e também temos o display: flex que por sua vez permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.
Aqui começa a magia, para nossa classe .topo atribuímos os valores 100vh na altura, fazendo com que o elemento no caso header ocupe toda a tela, mesmo em diferentes dispositivos, e também temos o display: flex que por sua vez permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela.
Na classe .area-interna usamos as margens automáticas com margin:auto que calcula automaticamente o distanciamento de elemento x limites da tela, note que neste exemplo usamos tanto para altura quando largura, caso precise somente da altura você pode usar margin: auto inherit ou margin:auto initial ou os valores em pixels/porcentagem.
<style type="text/css">
.topo{height: 100vh;display: flex;}
.area-interna{margin: auto;}
</style>
Veja no exemplo, o resultado:
Usando a inspetor de elementos do Firefox podemos ver o alinhamento do logo e os grids exibindo a área que ele ocupa.
Usando a inspetor de elementos do Firefox podemos ver o alinhamento do logo e os grids exibindo a área que ele ocupa.
Esse foi apenas um pequeno tutorial, uma pequena ajuda, e logo teremos mais conteúdo sobre layout responsivos (RWD) e dicas, tutoriais de frameworks para CSS como Bootstrap, Sass, Less e mais, fiquem ligados.
Caso tenha dúvidas, comente abaixo.
Obrigado!
Caso tenha dúvidas, comente abaixo.
Obrigado!
Comentários
Postar um comentário