Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Posicionamento do e-mail

Minha imagem do e-mail não tá centralizada com o texto. O que fiz de errado? :(

Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

html

<section class="novidades">
    <h2 class="novidades__titulo">Fique por dentro das novidades!</h2>
    <p class="novidades__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
    <input type="email" class="cadastro" placeholder="Cadastre seu e-mail">
  </section>

css

.novidades{
    background-color: var(--branco);
    font-family: 'poppins';
    padding: 1em;
    color: var(--cor--de--titulo--secundario);
}
.novidades__titulo{
    font-weight: 500;
}
.novidades__texto{
    font-weight: 300;
    margin: 1em 0;
}
.cadastro{
    border-radius: 24px;
    padding: 10px;
    width: 95%;
    border: 1px solid var(--cor--de--titulo--secundario);
    color: var(--cor--de--titulo--secundario);
}
.cadastro::placeholder{
    font-family: 'poppins';
    color: var(--cor--de--titulo--secundario);
    background: url("../img/Email.svg") no-repeat;
    padding-left: 2.5em;
}
3 respostas
solução!

Opa Raul, tudo certo?

Seu código parece estar certinho! Como estamos posicionando a imagem como background, pode acontecer do alinhamento inicial da imagem não centralizar com o texto, que por sua vez é colocado como placeholder.

Uma possível solução é definirmos a posição inicial do plano de fundo da imagem. Nesse caso, sugiro "1.7px", indicando que a imagem será deslocada 1,7 pixels para a direita em relação à posição padrão.

    background: url(../img/Email.svg) no-repeat 1.7px; 

Fico à disposição.

Tenha um bom dia e bons estudos.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓

Olá Raul! Blz?

Tenta adicionar essa linha dentro do seu .cadastro::placeholder:


background-position-y: center;

Essa propriedade/valor alinha o background no centro do eixo Y, ou seja, o vertical. Fazendo assim, a ideia é que funcione ;)

Valeu e bons estudos!

Galera, muito obrigada!

Ambas opções funcionaram! E adorei saber sobre o background-position-"y". Agradeço o pronto atendimento e atenção <3