Question

我有以下代码：

<td>
<img src="some_image_url.png" class="png" />
<img src="another_image_url.jpg" />
</td>

class =“png”的.css为：

.png {
    position:absolute;
}

如何将售罄图像显示在中间，而另一张图像对齐？

感谢。

编辑：以下是 td 的.css：

.something td {
    padding: 7px;
    width: 20%;
    text-align: center;
    vertical-align: top;
}

Answer 1

将表格的text-align设置为center

Answer 2

尝试这样：

td
{
  position: relative; /* if it's IE */
  /* position: fixed;  if it's mozila */
}
    .png , .jpg
    {
        position:absolute;
        left:50%;
        top:50%;
    }
    .png
        {
            margin-top: <put here half of the height of png>
            margin-left: <put here half of the width of png>
        }

将一个类jpg添加到jpg图像

更新：我再次编辑它，这对我有用...
确保你的td足够大

Answer 3

抱歉没有回答，我有一个解决方案：（我没有时间，以后我会改进我的答案）

绝对图像与默认的内嵌图像不在同一个流程中，但您仍然可以使用'text-align：center'

只是反过来，而不是将显示绝对地放到class =“png”，给它位置：relative ... 现在给予底部的img绝对位置：

<style type="text/css">    
.png {position:relative; z-index:10}
.bottom {position:absolute; z-index:0; left:0; top:0 }
</style>

<table>
<tr>
   <td style=" text-align:center">
     <img src="some_image_url.png" class="png" />
     <img src="another_image_url.jpg" class="bottom" />
   </td>
</tr>
</table>

这样，您将在另一个上方拥有自动居中的图像。不要忘记，如果你使用position：absolute;你必须设置一个顶部或底部;或左或右。在像IE这样的浏览器中，如果你没有指定至少左上角，它将以IE方式呈现（破碎）。

（在我的浏览器中它正在工作我不知道为什么小提琴没有按照我想要的方式显示它，请测试它并告诉我它是否正常）

顺便说一下，像你一样添加div是IMO的最佳解决方案。

Answer 4

将图片的float属性设置为

float: right;

对齐中间的图像

4 个答案: