Question

背景：我正在使用照片购物车，它可以自动从php生成基于表格的图库，从而限制了我的灵活性。我也是新手。

问题：图库放出了适应内容高度的表格单元格。当我有一整行水平缩略图时，表格单元格短而宽，当一行包含垂直缩略图时，单元格要高得多。我希望细胞都是方形的，缩略图位于中间。

我可以在样式表中访问输入CSS，以及HTML输入的一小部分，但是这个HTML插入到单个缩略图表单元格中;我没有权限编辑主表HTML。我使用firebug发现了许多组件的类和ID名称。

我尝试过：我尝试插入固定大小的DIV，但桌子仍然会占用未被实际图像占据的任何垂直空间。我已经尝试将一个透明的PNG文件，180px x 180px插入div（用于强制正确大小的单元格），然后将缩略图图像（150px x 150px）放入另一个div并使用z-indexing，相对混乱/绝对定位等，但我从来没有把两个div叠加在一起。绝对定位始终将所有50个缩略图对齐到页面的左上角，而不是表格单元格。现在，缩略图div总是直接出现在PNG div之下，导致表格单元格太高。

我被困了，因为我已经尝试了我的技能范围内的所有内容，并且用尽了我的谷歌搜索。我认为我需要的是一种方法来强制表格单元格保持一定的高度，或者找到一种方法使缩略图图像覆盖在PNG之上。

这是我当前的代码，它在一个div中放置180x180 PNG（强制表格为正确的尺寸），在第一个div下面放置第二个div中的缩略图图像。请原谅我的邋iness，因为我不是专业人士，只是一个修补匠！

HTML插入单个表格单元格

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

我可以访问这些额外的课程＆amp; IDS：

<table class="thumbnails_table">
<td class="thumbnails_cells">

Answer 1

我认为你可以用纯CSS做到这一点，而不必在TD中添加和HTML（当然除了图像标签）：

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

这就是我需要的全部内容，因为我的测试图像已经垂直居中（我认为它是在TD内部 - 默认的CSS等等）。

希望这有帮助！

Answer 2

好的，我弄清楚了......这么简单，但嘿，你以前从未做过......

基于另一个主题的好建议：

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>

制作表格单元格恒定宽度＆amp;高度

2 个答案: