如何让@ Html.TextBox在单元格中垂直居中？

Question

我在cshtml中定义了一个表，其中包含以下行：

<table class="tableinfo">
    <tr>
        <td class="one"></td>
        <td>User Name</td>
        <td>@Html.TextBox("username", User.Identity.Name)</td>
    </tr>

</table>

TextBox未与Style.css

中的以下内容垂直居中

table.tableinfo {
   padding-left: 0;
}

   table.tableinfo tr {
      margin: 25px 0;
      padding-left: 45px;
      vertical-align: middle;
   }

      table.tableinfo tr td.one {
         width: 3px;
         background: url("../Images/orderedList1.png") no-repeat;
      }
        table.tableinfo tr td.one + td + td {
           margin: 0;
           vertical-align: middle;
        }

结果是：

您可以看到“用户名”垂直居中，带有“1”图标，但TextBox占据了行的底部。如何让TextBox在单元格中垂直居中？