html - 表格中的TD高度问题

Question

我有一个具有以下结构的表 -

**HTML:**
    <table>
        <tr class="table_row row_over">
          <td><input type="checkbox" name="check_data_1" class="check_box" /></td>
          <td>
              Data1
          </td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>$0.000</td>
          <td>
              <span class="row_controls">
                  <a href="#" class="icon_22 icon_delete">
                     <span>Delete</span>
                  </a>
              </span>
          </td>
        </tr>
    </table>

**CSS:**
.icon_delete {
    background-position: 0 0px;
}
.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: inline-block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

问题: TD 的高度根据图标高度增加。它增加了 TD 高度并与其他 td 错位，因为我在 TD 底部仍有空间。

预计随附图片:

Answer 1

如果你想将图标居中对齐，我会这样做:

将图标的 css 更改为 display: block:

.icon_22 {
    background-image: url("../images/icon_sprite.png");
    background-repeat: no-repeat;
    display: block;
    height: 24px;    
    width: 24px;
    margin-right: 5px;
}

然后，因为您使用的是 td，请为该 td 指定一个类，以便它在中间垂直对齐:

<td class="alignMiddle">

和CSS:

.alignMiddle {
   vertical-align: middle;
}