Olá,
De acordo com o Figma, o texto + imagem (campo de "pesquisa") deveriam estar centralizados:
Porém, durante o curso a instrutora nos ensina somente a centralizar o texto e quando ela mesma adiciona a imagem da lupa, o visual fica diferente do que aquele que foi proposto no projeto.
Poderiam me ajudar a resolver esse problema e deixar tudo centralizado?
Atualmente, o meu está assim (conforme o da instrutora):
Obrigada!
hoje, com a Alura e o Google Gemini
Consegui!
Utilizei o padding-left antes do background-position.
.banner__pesquisa::placeholder {
font-family: var(--fonte-principal);
font-size: 14px;
font-weight: 400;
text-align: center;
color: var(--branco);
background: url(../img/Lupa.svg) no-repeat;
padding-left: 2.5em;
background-position: 2em;
}O resultado ficou assim:
Se alguém puder me confirmar se está correto, agradeço. Ainda estou aprendendo!
Obrigada!
Assim resolve, mas também poderia fazer assim:
display: flex;
justify-content: center;(Se não funcionar, pode ser que funcione com text-align: center; no lugar do justify-content)
Oi, Allex!
Muito obrigada pela ajuda.
Tentei fazer da forma que você falou, mas somente o texto fica centralizado. A imagem da lupa permanece no canto esquerdo do campo de pesquisa.
De qualquer forma, anotei a sugestão para projetos futuros.
Abraço,