Obtenir l'élément d'entrée positionné correctement

Question

L'élément input ne va pas entièrement dans le parent. Je veux que input soit au centre du parent mais qu'il obtienne une marge du haut. Quel css doit être ajouté pour le réparer?

#menu 
 
{ 
 
\t height:30px; 
 
\t background: #ccc; 
 
} 
 

 
#board-name 
 
{ 
 
\t display:block; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
\t height: 80%; 
 
     vertical-align: middle; 
 
\t min-width:200px; \t 
 
}

<div id="menu"> 
 
\t <span id="plus">+</span> 
 
\t <input id="board-name" value=''/> 
 
</div>

Answer 1

Eh bien, vous pouvez utiliser:

#board-name { 
    margin-top: -18px; 
} 

ou appelez

#plus { 
    float: left; 
} 

Answer 2

position d'utilisation: par rapport à vos parents et une position: absolute à votre enfant. essayez margin: auto ou vous pouvez simplement jouer avec gauche: XX et à droite: XX

Answer 3

Centre l'entrée et laisser flotter le +:

#menu 
 
{ 
 
    height:30px; 
 
    background: #ccc; 
 
    text-align: center; 
 
} 
 
#plus 
 
{ 
 
    float:left; 
 
} 
 
#board-name 
 
{ 
 
    display:block; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    height: 80%; 
 
    vertical-align: middle; 
 
    min-width:200px; \t 
 
}

<div id="menu"> 
 
\t <span id="plus">+</span> 
 
\t <input id="board-name" value=''/> 
 
</div>

Answer 4

Vous pouvez apporter de petits changements à votre comme ci-dessous et css il contient également votre code et un autre peu

 #menu 
    { 
    height:30px; 
    background: #ccc; 
    } 
    #plus { 
    float: left; 
    } 
    #board-name 
    { 
    display: block; 
    margin: 0 auto; 
    height: 80%; 
    vertical-align: middle; 
    min-width:200px; 
    position: relative;  
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    }