html - 入力とボタンをdivの中央に垂直に揃えます

Question

div 内に検索設定がありますが、何らかの理由で垂直方向に中央揃えにすることができません

これは私のコードです -

HTML:

<div class="search">
<input class="searchfield" type="text" placeholder="Search..." value="" />&nbsp;<button class="searchbutton">SEARCH</button>
</div>

CSS:

.search{
padding 0 10px;
font-size:0.8em;
float:right;
height:100%;
display:table;
vertical-align:middle;
}

.searchfield{
display:table-cell;
}

.searchbutton{
display:table-cell;
}

私は何を間違っていますか？

Answer 1

font-size に等しい line-height を追加します。

.search{
  padding 0 10px;
  font-size:0.8em;
  **line-height: 0.8em;**
  float:right;
  height:100%;
  display:table;
  vertical-align:middle;
}