0

我正在尝试使用 a 创建产品列表,<table>因为它基本上是一个包含行和列的表。

我想让其中一列列出项目状态是可用还是不可用,如果可用,我想用一个绿色的小图标表示这一点,否则用红色表示。我还希望该图标可以单击以更改它。

所以我用谷歌搜索,发现如果它是背景图像,我可能可以定位它,但我希望它可点击,所以这不好。

我已经尝试了所有的垂直对齐和居中等<td>

清除一些东西:

我只想知道如何在<td>. 图像本身就是锚点,当它被点击时,页面会重新加载并且图标会改变。我已经尝试将此图像定位在<td>但不能。这就是我的问题:如何定位它?

4

2 回答 2

2

不知道为什么在表格单元格中对齐图像有困难。表格包含许多有助于对齐的有用属性。这是一个示例表格,其中图像与表格单元格的中心对齐。

http://jsfiddle.net/Puppies4Life/zka5Q/

于 2012-07-25T22:45:46.097 回答
1

First of 表只能用于数据,产品列表不是数据。我建议使用普通的旧 div 或带有大量浮动 LI 元素的 UL。

对于您的图标,最好将其设为“A”标签,并将图标作为图像放在“A”标签中,或者将其作为“A”标签的背景。

要将其水平对齐,使其成为父容器 text-align:center。

我会假设每个产品都是一个图像并且是一个设定的高度?如果是这样,那么要垂直对齐它,只需将容器的 padding-top 设置为正确的高度以将其设置在中心。

希望以上内容对您有用:)

于 2012-07-25T22:30:32.143 回答