vertical align center input and button in div

css, html, vertical-alignment

Solution

Add a line-height equal to your font-size.

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

Problem

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="" />&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; } ``` what am I doing wrong?

Original source