Solucionado
Por exemplo, o professor está alinhando as imagens com pixel, nisso entendi. O que não deixou claro para mim é que, qual é o cálculo que o professor usou para poder deixar alinhado a "caixa"? como ele chegou na conclusão que se ele tem 240px de imagem então para alinhar, seria 110px? alguém poderia me ajudar, existe algum site didático que consegue entender mais os cálculos sobre os pixels.
hoje, com a Alura e o Google Gemini
Olá Laíza, tudo bem?
Nesse cálculo de alinhamento centralizado não basta apenas pegar a metade do valor total da área, pois o elemento de texto também possui uma altura a ser considerada.
Utilizando o exemplo que o instrutor aplicou temos a área total com uma altura de 240px em que seu ponto central seria 120px (metade do valor), porém se fizer isso vai perceber que o texto do menu vai ficar um pouco pra baixo e não totalmente centralizado. Isso acontece pois o valor de 110px de top se referencia do topo da página até o início do elemento e para centralizar precisamos levar em conta a altura deste elemento, aqui no caso o texto do menu (que tem aproximadamente 20px).
A conta ficaria assim: 240px (altura total da área) - 20px (altura aproximada do texto do menu) = 220px
Veja que nesta conta descontamos da altura total da área o valor referente a altura do texto do menu para que possamos obter um valor aproximado que possa utilizar como referência o meio do elemento texto do menu, e não mais o topo como anteriormente. Feita essa conta basta pegar a metade do valor obtido que você chega nos 110px como sendo o valor aproximado para se utilizar na propriedade top do texto do menu e fazer com que ele fique centralizado.
Não se preocupe pois com o tempo você vai pegando melhor esses cálculos e vai acabar sendo automático pra você, é uma questão de prática mesmo.
Espero ter ajudado =)
Ótima explicação Jeniffer, bons estudos pessoal! :)