Problema para centralizar imagens verticalmente em projeto Nextjs

[ricardo-ramos]

Bom dia a todo mundo.

Me considero iniciante e estou tentando centralizar verticalmente logos de redes sociais em um footer, mas estou tendo problemas para isso e não sei se tem a ver com os padrões do Next Image sobrepondo o CSS ou se há algo a melhorar no meu código.

Como os logos estão no momento:

O JSX deles:

O CSS inicial (em styled components):

Tentei separar apenas os logos em um container à parte (inicialmente, usando uma classe, só pra testar), mas não deu certo mesmo assim. Como ficou após mexer nisso:

Tentei aplicar um width: 100% na nova classe para os logos, mas ainda não resolveu.

Há algo a melhorar no meu código para resolver esse problema, por favor? Já tentei buscar dicas de flex, como resolver problemas de sobreposição de estilo do Next Image, mas nada resolve. :(

Muito obrigado desde já.

[felquis]

Olá tudo bem Ricardo? Espero que você possa ler minha resposta com calma e em seu computador, para você poder testar as dicas.

O next tem mais a ver com JavaScript, quando o assunto é alinhar algo na tela sempre devemos focar em 2 pontos.

1. A estrutura do HTML
2. E os estilos do CSS

<div class="logos">
  <img />
  <img />
  <img />
</div>

A estrutura do seu HTML nessa parte das imagens está fazendo sentido para mim.

Dica DevTools

Uma dica, é usar o DevTools para inspecionar o elemento com a classe .logos e alterar as propriedades de flexbox, por exemplo:
https://developer.chrome.com/docs/devtools/css/flexbox/#examine

Do lado da propriedade display: flex aparece um ícone que contem 4 quadradinhos
ao clicar no ícone abre uma ferramenta de alinhamento que tem o poder de alinhar essas imagens da forma que você quer.

---

Voltando para o CSS, styled components.

Você está usando o styled-components, eu recomendo você verificar se usar classes dentro de um styled component dessa forma realmente funciona:

Em vez de fazer assim:

export const SocialWrapper = styled.div`
  .logos {
    display: flex;
    align-items: center;
  }
`

Tente já definir o Logos de uma vez por todas, assim:

export const Logos = styled.div`
  display: flex;
  align-items: center;
`

Uma dica é sempre usar o DevTools, e inspecionar o elemento quer estilizar com CSS para verificar se os estilos estão sendo aplicados no elemento correto, pois se não estão pode ser que você esteja usando a lib de CSS de forma incorreta, que neste caso é o styled-components, mas poderia ser tailwindcss, bootstrap entre outras.

---

Reduza o escopo

As vezes tem tantas forças agindo em volta do elemento, que fica difícil para nós entendermos o que realmente influencia este elemento para que a gente possa fazer ele ficar da forma que queremos.

Nestes casos, aplique o método de dividir para conquistar, crie a mesma coisa em um escopo reduzido, neste caso de HTML e CSS você pode usar enfim, HTML e CSS puro para você validar que você não está louco e que o conceito mais básico funciona, dessa forma com uma prova concreta de que funciona o que você quer fazer, você volta para o framework e faz a mesma coisa da forma que é feita na lib/framework usada.

No seu caso, testei e este HTML

<div class="socialwrapper">
  <h1>Redes Sociais</h1>

  <div class="logos">
    <img src="https://picsum.photos/id/237/30/20" width="30" height="20" />
    <img src="https://picsum.photos/id/238/20/30" width="20" height="30" />
    <img src="https://picsum.photos/id/235/25/25" width="25" height="25" />
  </div>
</div>

com este CSS:

.logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.socialwrapper {
  max-width: fit-content;
}

Se parece muito com a estrutura que você está usando, porém funciona perfeitamente:

Link para o código no codepen https://codepen.io/felquis/pen/oNprJXg

O que me faz suspeitar, se os estilos que você está usando com o styled components estão sendo aplicados corretamente aos elementos.

---

É isso, te ajudou? Qualquer coisa, reduza o escopo, e mande aqui no fórum para a gente tentar te ajudar.

[felquis]

@ricardo-ramos oi, consegui te ajudar? Fala comigo 👨‍🎤

[ricardo-ramos]

Olá tudo bem Ricardo? Espero que você possa ler minha resposta com calma e em seu computador, para você poder testar as dicas.

O next tem mais a ver com JavaScript, quando o assunto é alinhar algo na tela sempre devemos focar em 2 pontos.

1. A estrutura do HTML
2. E os estilos do CSS

<div class="logos">
  <img />
  <img />
  <img />
</div>

A estrutura do seu HTML nessa parte das imagens está fazendo sentido para mim.

Dica DevTools

Uma dica, é usar o DevTools para inspecionar o elemento com a classe .logos e alterar as propriedades de flexbox, por exemplo: https://developer.chrome.com/docs/devtools/css/flexbox/#examine

Do lado da propriedade display: flex aparece um ícone que contem 4 quadradinhos ao clicar no ícone abre uma ferramenta de alinhamento que tem o poder de alinhar essas imagens da forma que você quer.

Voltando para o CSS, styled components.

Você está usando o styled-components, eu recomendo você verificar se usar classes dentro de um styled component dessa forma realmente funciona:

Em vez de fazer assim:

export const SocialWrapper = styled.div`
  .logos {
    display: flex;
    align-items: center;
  }
`

Tente já definir o Logos de uma vez por todas, assim:

export const Logos = styled.div`
  display: flex;
  align-items: center;
`

Uma dica é sempre usar o DevTools, e inspecionar o elemento quer estilizar com CSS para verificar se os estilos estão sendo aplicados no elemento correto, pois se não estão pode ser que você esteja usando a lib de CSS de forma incorreta, que neste caso é o styled-components, mas poderia ser tailwindcss, bootstrap entre outras.

Reduza o escopo

As vezes tem tantas forças agindo em volta do elemento, que fica difícil para nós entendermos o que realmente influencia este elemento para que a gente possa fazer ele ficar da forma que queremos.

Nestes casos, aplique o método de dividir para conquistar, crie a mesma coisa em um escopo reduzido, neste caso de HTML e CSS você pode usar enfim, HTML e CSS puro para você validar que você não está louco e que o conceito mais básico funciona, dessa forma com uma prova concreta de que funciona o que você quer fazer, você volta para o framework e faz a mesma coisa da forma que é feita na lib/framework usada.

No seu caso, testei e este HTML

<div class="socialwrapper">
  <h1>Redes Sociais</h1>

  <div class="logos">
    <img src="https://picsum.photos/id/237/30/20" width="30" height="20" />
    <img src="https://picsum.photos/id/238/20/30" width="20" height="30" />
    <img src="https://picsum.photos/id/235/25/25" width="25" height="25" />
  </div>
</div>

com este CSS:

.logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.socialwrapper {
  max-width: fit-content;
}

Se parece muito com a estrutura que você está usando, porém funciona perfeitamente:

Link para o código no codepen https://codepen.io/felquis/pen/oNprJXg

O que me faz suspeitar, se os estilos que você está usando com o styled components estão sendo aplicados corretamente aos elementos.

É isso, te ajudou? Qualquer coisa, reduza o escopo, e mande aqui no fórum para a gente tentar te ajudar.

Boa noite, @felquis, tudo bem? Perdão pela demora, a semana foi bem puxada e, inclusive, tive que ir ao trabalho presencialmente levar o computador para formatar em um dos dias (a empresa é na capital, mas moro no interior).

Muito obrigado pela sua resposta, realmente tentei todos os passos... Consegui distribuir horizontalmente os logos, mas nada de centralizá-los verticalmente, mesmo separando em uma variável ou diminuindo o escopo ao máximo possível.

A solução que encontrei foi não usar os logos como imagens, mas em códigos SVG, mudando o tamanho diretamente na tag e a cor de cada um deles especificando o path do SVG no styled components. Isso possibilitou a centralização vertical com o flexbox.

Mesmo assim, as suas dicas são extremamente válidas e vou usá-las para praticar um pouco mais a distribuição de tags e o uso do flexbox no dia a dia, eu agradeço muito mesmo!

Além disso, é uma boa deixa para que eu comece a pesquisar mais sobre o Image do Nextjs (o que já estou fazendo, inclusive) e entender como isso afeta o CSS, assim como encontrar formas de mudar isso.