alinhar input ao centro da div

[natant1 1]

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> 

CSS:

#pesquisaArtista{
    background-color: #4aae27;
    height: 40px;
    width: 90%;
    max-width: 300px;
    padding-top: 0px;
    display: inline-block;
}
#pesquisaArtista label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaArtista input{
    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;
}
#pesquisaGenero label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaGenero input{
    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;
}
#pesquisaAlbum label{
    color: white;
    font-family: Agency FB;
    font-size: 1.9em;
}
#pesquisaAlbum input{
    position: relative;
    color: grey;
    padding: 5px;
    width: 170px;
    margin-top: -30px;
}

[RoXbY 3]

uerhuehrueh se tentou tudo por que tens esperança que haja solução?

 

seguinte, adicione: float:left no #pesquisaArtista label

[L. Henrique 179]

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> 

Se você quiser ver se isso realmente funciona, veja a DEMO.

Abraços!

[natant1 1]

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> 

Se você quiser ver se isso realmente funciona, veja a DEMO.

 

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......

[L. Henrique 179]

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!

[natant1 1]

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 ♡♡!!