Question

I have the following code that produces a background image in a table cell. I would like to put that image in the center of the cell.

<tr>
  <td valign="top" width=<%=width%>>
    <div id="loading" 
       style="background-image: url(spinner.gif); height: 16px; width: 16px;">
    </div>
  </td>
</tr>

I tried align=center but that didn’t work and neither did text-align: center.

Answer 1

Centering your background image

You’re looking for the background-position property.

You could also coalesce the properties into the shorter background property:

#loading {
  background: url(spinner.gif) no-repeat center center;
}

Centering your element within your cell

One other reading of your question is that you want to center your loading animation in your table cell. If that’s the case, I would encourage you to use the CSS properties text-align and vertical-align.

td.loading {
  text-align: center;
  vertical-align: middle;
}

With the following HTML

<td class="loading">
  <img src="loader.gif" />
</td>

You can see a working demo online at http://jsbin.com/udehox/

it’s worth noting that your DIV is a block element, and doesn’t display inline by default. As such, you won’t be able to “center” it, since it doesn’t permit any space on its left or right.

You can force it to display as an inline element by attaching the display: inline or display: inline-block statements to it.