1

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

<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。

4

4 回答 4

6

将背景图像居中

您正在寻找background-position房产。

您还可以将属性合并到较短的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/在线查看工作演示

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

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

于 2012-04-06T16:09:34.187 回答
0

尝试 - 背景位置：中心；那应该做你正在寻找的。

于 2012-04-06T16:11:32.930 回答
0

看起来您正试图将单元格内的 div 居中。您可以在 div 上设置边距或使用相对定位。在图像上设置背景位置无济于事。div 设置为 16x16，我打赌这是图像的大小。

于 2012-04-06T16:15:03.587 回答
0

试试这个，

 <tr>
 <td valign="top" width=<%=width%>  align="center"  >
 <div id="loading" style="background:url(spinner.gif) no-repeat center center; width:16px;  height:16px;">
</div>
 </td>
 </tr>
于 2012-04-06T16:54:26.867 回答