Question

I am having a table with the below structure –

**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;
}

Problem:
Height of the TD increases based on icon height. It increases the TD height and mis-allign with other td, where as I have still space left at bottom of TD.

Expected as attached image herewith:

Answer 1

if you would like to align the icon to the middle, I would do it like this:

change the icon’s css to display: block:

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

Then, and because you’re using a td, specify a class to that td so it aligns vertically in the middle:

<td class="alignMiddle">

and the CSS:

.alignMiddle {
   vertical-align: middle;
}