垂直对齐中心输入和div中的按钮(vertical align center input and button in div)

我在div中有一个搜索设置但由于某种原因无法使它垂直对齐中心

这是我的代码 -

HTML：

<div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" /> <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; }

我究竟做错了什么？

I have a search setup inside a div but for some reason cannot get it to vertically align center

This is my code -

HTML:

<div class="search"> <input class="searchfield" type="text" placeholder="Search..." value="" /> <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; }

what am I doing wrong?