将图像对齐,而不必将图像作为背景

时间:2012-07-25 22:15:35

标签: html css html-table position

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

我希望其中一列列出项目状态是可用还是不可用,我想用一个绿色图标(如果可用)表示,否则为红色。我也希望这个图标可以点击进行更改。

所以我用Google搜索并发现如果它是背景图片我可以定位它,但我希望它可以点击,所以这没有用。

我已经尝试了所有垂直对齐和中心等...我已经阅读并尝试了边距和填充以及所有种类但我无法将我的小图标图像放在中间(horiz和vert)我的小<td>

澄清一些事情:

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

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

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

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

我会假设每件产品都是一张图片并且是一个设定的高度?如果是这样,那么将其垂直对齐只需使容器的填充顶部具有正确的高度即可将其设置在中心位置。

希望以上内容适合您:)