Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

natant1

alinhar input ao centro da div

Recommended Posts

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:
CPufElF.jpg

 

Como eu quero:
4VXTuZI.jpg

 

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;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

seguinte, adicione: float:left no #pesquisaArtista label

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

GLk8HRI.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.