入力要素を正しく配置する

Question

input要素が親の内部に完全には入っていません。私はinputを親の中心にしたいが、上からいくらかのマージンを得る。それを修正するためにどのようなCSSを追加するのですか？

#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

さて、あなたが使用することができます。

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

するか、

#plus { 
    float: left; 
} 

Answer 2

使用位置呼び出す：あなたの親との相対位置：あなたの子供への絶対に。自動またはあなたが左でちょうど混乱することができます：その後、余裕をみてくださいXX、右：XX

Answer 3

センターの入力とは、フロート+：

#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

あなたがに少し変更を加えることができます以下のような、CSS、それはまた、あなたのコードとは少し別の

 #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%); 
    }