Vertically center Align div Problem along with image

Hi Please find the attached image this is my html & css code

<h2 style="margin:0px 0px 2px 0px" class="widgettitle3">Contact Response for your request</h2>
      <div  class="tablediv">

       <div class="rowdiv">
        <div  class="celldiv">
         <ul class="gallery">
          <li>
           <a href='http://localhost/shadi/public/partial.html' class='boxy standardLink' title='9'><em><strong>9</strong></em><img src="http://localhost/shadi//img/images/50x50/9.jpeg" border="0"></a>

          </li>          
         </ul>         
        </div>
        <div  class="celldiv boldText">Contact Details :</div><div  class="celldiv"><input type="text" style="height:28px;开发者_如何学JAVA"  maxlength="150" size="40" id="9" name="9" class="required" ></div> <div  class="celldiv">&nbsp;<input type="button" class="btn" value="Submit" onclick="javascript:processProvideContact('9');">&nbsp;<input type="button" class="btn"  value="Decline" onclick="javascript:processDecline('9');"></div>
       </div> 

      </div>




.tablediv {

 display: table;
 height:100%;
 width:100%;

 border:1px solid red;
 border-spacing: 0px; /*cellspacing:poor IE support for  this*/
 border-collapse: separate;
}

.celldiv {

 float: left; /*fix for  buggy browsers*/
 display: table-cell;
 position:relative;
 margin:1px 1px 1px 0px;
 padding:1px 1px 1px 0px;
 border:1px solid black;
 vertical-align: middle;

}

.rowdiv {
 display: table-row;
 width: auto;
}

middle and third column is not vertically center position

---

change your celldiv css class to

.celldiv 
{
    border: 1px solid black;
    display: inline-block;
    padding: 1px 1px 1px 0;
    position: relative;
    vertical-align: middle;
}