I want to vertically align an input in my project. My code works for a span but don't work for input! whats the reason?

[JSFiddle](http://jsfiddle.net/e8ESb/546/)

CSS code:

```
.float  {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
div {
  display: table;
  border: solid 1px blue;  
  height: 120px;
}

```

HTML Code:

```
<div  class="col-sm-12 ">    
    <span class='float'>Float right</span>
</div>
<div  class="col-sm-12 ">     
    <input class='float' id='btnReport' name='btnReport'   type='button' value='report' />     
</div>

```