CODEWITHSUNDEEP
htmlcss
John Baker
John Baker

Reputation: 435

How to align two images inside a table cell in two different places?

I have two images inside a cell. I want one to be aligned in the middle of the cell and another in the top right corner of the cell. The right top corner image should overlay the centered imaged.

I want it to make it look exactly like this

https://jsfiddle.net/5bL56a34/

but without specifying the left margin since centered image can have a different size.

Here is the HTML code I got right now

<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>

and CSS

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

Upvotes: 1

Views: 2636

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9416

I guess you want something like this 

.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>

Upvotes: 1

Alex
Alex

Reputation: 8695

You can use right property instead of left and the give position:relative; to the td element.

.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

Upvotes: 1

Related Questions