獲取輸入元素的位置正確

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