需要帮助居中的图像也是一个链接

Question

我正在尝试在td单元格的中心放置一个播放图标，其整个内容也应该是链接的目标。单元格的背景图像大于居中的播放图标，我需要将锚点应用于整个单元格（包括背景）。

在下面的代码中，链接仅适用于播放图标。我所做的一切使锚点应用于整个单元格会破坏游戏图标的居中（垂直和水平）。我该怎么做呢？谢谢！

<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

将display:inline-block添加到您的<a>样式：

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

<a>标签默认为display: inline。

Answer 2

text-align: center;

这是使内容与中心对齐的正确属性。

对于图像尺寸，您确认它实际上与td单元一样大吗？

Answer 3

您是否使用表格进行布局？

好吧，首先我想问一下这是否在一张桌子里，因为你正在使用一张桌子进行布局 如果是，you shouldn't。

<强> 1。施胶

我建议您设置锚点的大小而不是单元格（请参阅下面的代码段）。

<强> 2。垂直居中

要获得垂直居中的旧黑客是从顶部开始已知高度50％的空间元素，然后使用高度的一半的负边距来纠正：

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

现在有一个名为calc的强大功能，甚至pretty well supported更好（感谢@billynoah提醒我）：

top: calc(50% - 35px);

第3。使用：after元素

还有一个名为:after的奇妙伪元素。您不需要在每个锚标记中嵌套img;你可以这样做：

a:after {
  background-image: url("http://i.stack.imgur.com/5b8Bn.png");
  /* You need a few more styles, see 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("http://i.stack.imgur.com/5b8Bn.png");
}

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

更好：此时我建议您考虑使用:after技巧，然后使用实际<img>作为背景：

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("http://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 4

我使用乐队pic作为视频海报，然后用锚点包装视频元素。使用浏览器后退按钮或后退键退出视频。

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="http://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

我认为这里的主要问题是你的背景图像奇怪地缺乏小猫。

另外，请注意没有text-align: middle这样的东西。您应该使用text-align: center代替。

除此之外，您可以使用绝对定位考虑您的图标大小。我喜欢calc，但是有很多方法可以完成同样的事情，正如其他一些答案所证明的那样。我这样解决了：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;