在Twitter Bootstrap表中垂直居中输入表单

Question

我不能使用Twitter Bootstrap在表格中垂直居中输入表格。我在堆栈上找到了解决方案，但它只适用于纯文本，不适用于输入形式（类vert-align）。你有什么建议吗？

JSFiddle

<table class="table table-striped">
                    <tr>
                      <th>
                       #
                      </th>
                      <th>
                       <i class="glyphicon glyphicon-check"></i>
                      </th>
                      <th>
                      Item#1
                      </th>
                      <th>
                      Item#2
                      </th>
                     </tr>
        <div class="row">
          <tr>
            <div class="col-md-2">
              <td class="vert-align">
                1
              </td>
            </div>
            <div class="col-md-2">
              <td class="vert-align">
            <input type="checkbox">
              </td>
            </div>
            <div class="col-md-4">
              <td class="vert-align">
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
              </div>
            </div>
              </td>
            </div>
            <div class="col-md-4">
              <td class="vert-align">
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
              </div>
            </div>
              </td>
            </div>
          </tr>
        </div>

        <div class="row">
          <tr>
            <div class="col-md-2">
              <td class="vert-align">
              2
              </td>
            </div>
            <div class="col-md-2">
              <td class="vert-align">
            <input type="checkbox">
              </td>
            </div>
            <div class="col-md-4">
              <td>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
              </div>
            </div>
              </td>
            </div>
            <div class="col-md-4">
              <td>
            <div class="form-group">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
              </div>
            </div>
              </td>
            </div>
          </tr>
        </div>
      </table>

和css

 .datepicker.dropdown-menu {
z-index: 1151;
  }

  .table tbody>tr>td.vert-align {
vertical-align: middle;
  }