如何在两个不同位置的表格单元格内对齐两个图像？答案

【问题标题】：How to align two images inside a table cell in two different places?如何在两个不同位置的表格单元格内对齐两个图像？
【发布时间】：2015-11-15 17:05:48
【问题描述】：

我在一个单元格中有两个图像。我希望一个在单元格的中间对齐，另一个在单元格的右上角对齐。右上角的图像应覆盖居中的图像。

我想让它看起来像这样

https://jsfiddle.net/5bL56a34/

但不指定左边距，因为居中的图像可以有不同的大小。

这是我现在得到的 HTML 代码

<table border="1" bgcolor="black"> 
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>  
  </tr>
  <tr> 
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr> 
</table>

和 CSS

.topRight 
{
  position:absolute;
  left:495px;
}

【问题讨论】：

标签： html css

【解决方案1】：

我猜你想要这样的东西

.topRight {
  position: absolute;
  top: 0;
  right: 0;
}
td{position: relative;}

<table border="1" bgcolor="black">
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
  <tr>
    <td>
      <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
      <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您可以使用right 属性代替left，并将position:relative; 赋予td 元素。

.topRight {
    position: absolute;
    right: 1px;
    top: 1px;
}

td
{
    position: relative;
}

<table border="1" bgcolor="black">
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
    <tr>
        <td>
            <img src="http://i.imgur.com/zjp0GlD.png" class="centered">
            <img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
        </td>
    </tr>
</table>

Jsfiddle

【讨论】：