Centralizar um elemento dentro de um container, seja verticalmente, horizontalmente, ou em ambas as direções, é uma necessidade bastante comum quando estamos desenvolvendo páginas para a web.
Antes das CSS3, porém, obter esse tipo de formatação visual não era uma tarefa tão simples, principalmente devido à incompatibilidade entre os browsers e à necessidade de garantir a responsividade.
Aqui, trabalharemos basicamente sobre o elemento que atuará como container, de forma que as divs ou outros componentes internos sejam alinhados ao centro. Para isso, iniciaremos criando um arquivo HTML com a estrutura apresentada a seguir.
É possível adicionar a instrução else ao final do for. Isso faz com que um bloco de código seja executado ao final da iteração, como mostra o exemplo a seguir:
Ao acessarmos esse documento no browser, veremos a div posicionada no centro, como mostra a seguir, e mesmo redimensionando o browser, notaremos que ela mantém esse comportamento.
O mesmo resultado visual poderia ser obtido se definíssemos a propriedade flex-direction como column. Nesse caso, seria preciso configurar a disposição dos elementos internos para ocorrer na direção vertical, enquanto a propriedade align-items passaria a atuar na direção horizontal.
Leia o conteúdo completo:
Leia mais
Sua nova carreira começa aqui
Baixe agora
Veja quem já conseguiu chegar lá
Grátis por tempo limitado
Cadastre-se
Junte-se a nós