需要帮助在 <td> 中居中图像，这也是一个链接

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

我建议您设置锚点的大小而不是单元格的大小（参见下面的 sn-p）。

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 */
}

试试 sn-p...

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

我使用乐队图片作为视频海报，然后用锚点包裹视频元素。使用浏览器的返回按钮或返回键退出视频。

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，但是有很多方法可以完成与其他一些答案中展示的相同的事情。我是这样解决的：

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