Olá!
Fiquei com uma dúvida na aula 'Barra de pesquisa' do 2º módulo. Meu código está aqui. Nós tínhamos que centralizar o texto da barra de pesquisa junto com a imagem da lupa, lado a lado, conforme está no projeto do Figma desse curso.
Porém, consegui apenas alinhar o texto da barra de pesquisa no centro e deixar a lupa próxima a esse texto. Como faço para alinhar os dois ao centro? Tive dificuldade justamente porque a imagem está dentro do placeholder.
Olá Bruna,
Sou aluno da Alura tambem e passei por essa matéria e obtive dificuldade tambem com essa lupa kkk, vi seu codigo ali pelo codepen e experimente por ali no background position o valor de 1em; ao invés de 5
.banner__pesquisa::placeholder { color: #000000; background: url(https://www.pngmart.com/files/8/Search-Button-PNG-Transparent-Image.png); background-repeat: no-repeat; background-size: contain; background-position: 5em; (1em)
}
Espero ter ajudado!
Oi, Bruna, tudo bem?
Muito obrigado por compartilhar o seu código conosco.
Para realizar o alinhamento do ícone de lupa e do texto, adicionados no input de pesquisa, podemos utilizar como uma alternativa duas propriedades combinadas: o background-position, que vai definir a posição d alupa dentro do input e o padding-left, que definirá o espaçamento interno no lado esquerdo que o texto colocado no placeholder vai ocupar.
Com essa opção os dois elementos que estão dentro do input de pesquisa precisam ser alterados manualmente.
O código ficaria escrito da seguinte maneira:
.banner__pesquisa::placeholder {
color: #000000;
background: url(https://www.pngmart.com/files/8/Search-Button-PNG-Transparent-Image.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 2.5em;
padding-left:2.5em;
}Com isso, o resultado seria o apresentado na imagem abaixo:
Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição.
Abraços e bons estudos!