html - 如何在 html 表格行中对齐背景图像？

Question

我有以下代码在表格单元格中生成背景图像。我想将该图像放在单元格的中心。

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

我尝试了 align=center 但那没有用，text-align: center 也没有。

Answer 1

居中背景图片

您正在寻找 background-position属性(property)。

您还可以将属性合并为更短的 background属性:

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

在你的单元格中居中你的元素

您的问题的另一种解读是，您希望将加载动画置于表格单元格的中心。如果是这样，我会鼓励您使用 CSS 属性 text-align和 vertical-align .

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

使用以下 HTML

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

您可以在 http://jsbin.com/udehox/ 在线查看工作演示

值得注意的是，您的 DIV 是 block 元素，默认情况下不显示 inline。因此，您将无法将其“居中”，因为它的左侧或右侧不允许有任何空间。

您可以通过附加 display: inline 或 display: inline-block 语句来强制它显示为内联元素。