Olá jovens programadores, alinhar elementos na pagina pode ser um pouco complicado para quem não tem muita experiência com css, quando eu comecei meu grande problema era alinhar elementos verticalmente no centro, então pequisando no pai google aprendi usar as propriedades como position absolute e display table, que pra mim sempre foram uma grande gambiarra, felizmente chegou o display flex mas nem tudo são flores pois nem todos navegadores são compativeis com ele, mal sabia que com elementos display inline-block se podia realizar quase todos tipo de alinhamentos e como exemplo irei demonstrar uma linha e duas colunas se alinhado verticalemente no centro.

Para iniciarmos vamos criar uma linha.

.row{display: block; font-size: 0;}

E agora nossa coluna.

.column{display: inline-block; font-size: 17px; width: 50%; vertical-align: middle; }

O grande segredo esta no vertical-align middle, porém ele só funciona corretamente se todos os filhos do bloco pai estiverem usando a propriedade.

Veja um exemplo: exemplo básico

Faça um teste, qualquer dúvida estou a disposição ;)


521 0 0