Need help centering image in that is also a link

Question

I'm trying to place a play icon in the center of a td cell whose entire content should also be the target of a link. The cell has a background image that is larger than the centered play icon, and I need the anchor to apply to the entire cell (including background).

In the code below, the link only applies to the play icon. Everything that I do to make the anchor apply to the entire cell breaks the centering (both vertical and horizontal) of the play icon. How do I do this? Thanks!

<table>
 <tbody>
  <tr>
   <td width="244" height="186" style="background:bg-image.png no-repeat center;background-size:100%;text-align:middle">
    <a href="action.htm" style="height:100%;width:100%;" >
     <img src="icon_play.png"/>
    </a>
   </td>
  </tr>
 </tbody>
</table>

Answer 1

Are you using tables for layouts?

Well, first I want to ask whether this is inside a table because you're using a table for layout.
If so, you shouldn't.

1. Sizing

I would suggest that you rather set the size of the anchor than the cell (see the snippet below).

2. Vertical Centering

The old hack to get vertical centering was to space elements with known heights 50% from the top and then use a negative margin of half the height to correct:

margin-top: -35px;
top: 50%;

Now there's a great feature called calc which is even pretty well supported and much nicer (thanks @billynoah for reminding me):

top: calc(50% - 35px);

3. Use the :after element

There's also a wonderful pseudo element called :after. You don't need to nest an img in every anchor tag; you can just do this:

a:after {
  background-image: url("https://i.stack.imgur.com/5b8Bn.png");
  /* You need a few more styles, see the snippet */
}

Try the snippet...

a {
  display: block;
  width: 244px;
  height: 186px;
  background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg/1024px-Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg") no-repeat center;
  background-size: 100%;
  text-align: center;
}
a:after {
  display: block;
  width: 70px;
  height: 70px;
  position: relative;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  content: " ";
  background-image: url("https://i.stack.imgur.com/5b8Bn.png");
}

<table>
  <tbody>
    <tr>
      <td>
        <a href="#">
        </a>
      </td>
    </tr>
  </tbody>
</table>

Even better: At this point I would recommend that you consider using the :after trick and then using an actual <img> for your background:

a {
  display: inline-block;
  position: relative;
}
img {
  display: block;
  width: 244px;
  height: 186px;
}
a:after {
  display: block;
  width: 70px;
  height: 70px;
  content: " ";
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  background-image: url("https://i.stack.imgur.com/5b8Bn.png");
}

<a>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg/1024px-Amy_Grant_on_Stage_at_the_Peppermill_Concert_Hall_in_West_Wendover,_Nevada.jpg" />
</a>

Answer 2

add display:inline-block to your <a> style:

<a href="action.htm" style="display:inline-block;height:100%;width:100%;" >

<a> tags are display: inline by default.

Answer 3

text-align: center;

That is the correct property to get the content aligned to the center.

For the image size did you confirm it is in fact as large as the td cell?

Answer 4

I used the band pic as a video poster then wrapped the video element with the anchor. Use your browser back button or your back key to exit the video.

var anchor = document.querySelector('a');
var img = document.querySelector('img');
anachor.addEventListener('click', play, true);
var test = document.getElementById('test');

function play(event) {

  event.preventDefault();
  if (test.paused) {

    test.play();
    img.style.left = "-9999px";
    a.style.style.backgroundSize = '0%';
  } else {
    test.pause();
  }
}

a {
  display: block;
  width: 100%;
  height: 85%;
  background: url("https://glpjt.s3.amazonaws.com/so/av/photo.png") no-repeat center center;
  background-size: 150%;
  text-align: center;
}
img {
  position: absolute;
  margin-top: 0;
  top: 0;
  width: 25%;
}
video {
  top: -20px;
  position: relative;
}
table {
  table-layout: fixed;
  width: 100vw;
}

<table>
  <tbody>
    <tr>

      <td>
        <a href="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" target='_self'>
          <video id="test" poster="https://i.stack.imgur.com/7pzdk.png" controls height="auto" width="100%">
            < source src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" />



          </video>
        </a>
      </td>

    </tr>
  </tbody>
</table>

Answer 5

I think the main problem here is your background image is curiously lacking kittens.

Also, note there is no such thing as text-align: middle. You should use text-align: center instead.

Beyond that, you can use absolute positioning taking into account your icon size. I like calc for this but there are a plethora of ways to accomplish the same thing as demonstrated in some of the other answers. I solved it like this:

<table>
 <tbody>
  <tr>
   <td style="background:url('http://zuma-design.com/shared/so/kittens.jpg') no-repeat center;background-size:100%;position:relative;width: 700px; height: 500px;">
    <a href="#" onclick="alert('meow')" style="width: 100%; position: absolute; height: 100%; right: 0px; bottom: 0px;" >
    <img style="position: absolute; top: calc(50% - 95px); left: calc(50% - 95px);" src="http://zuma-design.com/shared/so/play.png"/>
    </a>
   </td>
  </tr>
 </tbody>
</table>