Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Alguém tem alguma solução para subir com esse input para deixar ele meio que centralizado na div? Ja tentei de tudo que eu conheço e não consigo.
SOCORRO!!!
Como fica:
Como eu quero:
código:
https://jsfiddle.net/natant1/6khds56a/1/
ou
HTML:
<div id="pesquisaArtista">
<label for="artista">Artista:
<input id="artista" name="artista" type="text"/>
</label>
</div>
<div id="pesquisaGenero">
<label for="genero">Gênero:
<input id="genero" name="genero" type="text"/>
</label>
</div>
<div id="pesquisaAlbum">
<label for="album">Álbum:
<input id="album" name="album" type="text"/>
</label>
</div>#pesquisaArtista{
background-color: #4aae27;
height: 40px;
width: 90%;
max-width: 300px;
padding-top: 0px;
display: inline-block;
} color: white;
font-family: Agency FB;
font-size: 1.9em;
} position: relative;
color: grey;
padding: 5px;
width: 170px;
margin-top: -30px;
}
#pesquisaGenero{
background-color: #cda009;
height: 40px;
width: 90%;
max-width: 300px;
padding-top: 0px;
color: white;
display: inline-block;
} color: white;
font-family: Agency FB;
font-size: 1.9em;
} position: relative;
color: grey;
padding: 5px;
width: 170px;
margin-top: -30px;
}
#pesquisaAlbum{
background-color: #053d74;
height: 40px;
width: 90%;
max-width: 300px;
padding-top: 0px;
display: inline-block;
} color: white;
font-family: Agency FB;
font-size: 1.9em;
} position: relative;
color: grey;
padding: 5px;
width: 170px;
margin-top: -30px;
}Natan,
Ao invés de corrigir o seu código (que está um pouco errado :() - tirei um tempo para cria-los da forma correta. Quando você trabalha com um input (que é um elemento de form), você deve colocar o input dentro do Label, assim tudo fica centralizado sem você precisar recorrer aos overrides no CSS.
Veja um exemplo:
<div class="wrapper">
<label for="artista"> Artista:
<input type="text" name="artista" id="artista">
</label>
</div>Abraços!
>
Natan,
Ao invés de corrigir o seu código (que está um pouco errado :() - tirei um tempo para cria-los da forma correta. Quando você trabalha com um input (que é um elemento de form), você deve colocar o input dentro do Label, assim tudo fica centralizado sem você precisar recorrer aos overrides no CSS.
Veja um exemplo:
<div class="wrapper">
<label for="artista"> Artista:
<input type="text" name="artista" id="artista">
</label>
</div>Abraços!
Oi Henrique,
Obrigado pela dica do input dentro do label, vou refazer essa parte com os outros. Porem, quando eu aplico font-size, o input desce e nao fica centralizado :( :(
https://jsfiddle.net/natant1/92fnddu5/2/
Inseri borda na label e no input para ver melhor o que está acontecendo e ficou tudo mais bizarro kkkkkkkkkkk
o input ultrapassa a label......
Natan,
Com o seu modelo de HTML anterior (que também pelo W3 é válido) ou com o modelo atual (label > input), defina as seguintes regras CSS:
label, input {
display: inline-block;
vertical-align: middle;
}Eu dei uma revirada no seu código ali e fiz com o seu modelo antigo mesmo. Veja aqui a DEMO.
Abraços!
>
Natan,
Com o seu modelo de HTML anterior (que também pelo W3 é válido) ou com o modelo atual (label > input), defina as seguintes regras CSS:
label, input {
display: inline-block;
vertical-align: middle;
}Eu dei uma revirada no seu código ali e fiz com o seu modelo antigo mesmo. Veja aqui a DEMO.
Abraços!
Você mais uma vez me salvando
Eu tinha tentado aplicar 'inline-block' na label e no input antes mas não adiantou, porem não lembrava do 'vertical-align' para aplicar.
Muito obrigado ♡♡!!
uerhuehrueh se tentou tudo por que tens esperança que haja solução?
seguinte, adicione: float:left no #pesquisaArtista label