intrare verticală centrală și buton în div

Am o setare de căutare în interiorul unui Div, dar din anumite motive nu pot să-l aliniez vertical

Acesta este codul meu -

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

ce fac greșit?

3
Da, am crezut că se va concentra, dar nu este. Am inspectat Divina de căutare cu Firefox - Firebug și are destulă înălțime pentru buton și intrare pentru a intra înăuntru, dar nimic nu se întâmplă ... enervant
adăugat autor Jizbo Jonez, sursa
Mulțumesc UmairP linia de înălțime a lucrat pentru mine. Foarte apreciat.
adăugat autor Jizbo Jonez, sursa
Mi se pare bine, dar poți să te joci cu înălțimea liniei și să vezi dacă funcționează pentru tine
adăugat autor Obi-Wan Spock, sursa
arată vertical centrat pe mine: jsfiddle.net/5cyPs
adăugat autor Adam Sweeney, sursa
poate accepta răspunsuri la jquery
adăugat autor Valli69, sursa

1 răspunsuri

Adăugați o înălțime a liniei egală cu mărimea fontului.

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