CSS：表格行中的中心图像链接

Question

我需要帮助将带有背景图像的链接置于表格单元格内。

tr.match td.oddsselected {
  padding: 0px 0px 0px 0px;
  margin: 0;
  text-align: center;
}
.oddsselected a {
  background: skyblue url(../../img/odds.png) no-repeat scroll 0 0;
  display: block;
  font-size: 11px;
  height: 28px;
  padding-top: 8px;
  width: 60px;
  color: #fff;
}
.oddsselected a:hover {
  background: limegreen url(../../img/hodds.png) no-repeat scroll 0 0;
}

<table>
  <tr>
    <td class="oddsselected"><a href="#" target="_blank" title="Click">value</a>
    </td>
  </tr>
</table>

Answer 1

由于您的a显示为块元素，因此您需要为其设置文本的对齐规则。

＆＃13;

＆＃13;

tr.match td.oddsselected {
  padding: 0px 0px 0px 0px;
  margin: 0;
  text-align: center;
}
.oddsselected a {
  background: skyblue url(../../img/odds.png) no-repeat scroll 0 0;
  display: block;
 
  /* horizontally centers the text */
  text-align: center;

  /* vertically centers it - 28px height - 8px top padding = 20px */
  line-height: 20px;
  font-size: 11px;
  height: 28px;
  padding-top: 8px;
  width: 60px;
  color: #fff;
}
.oddsselected a:hover {
  background: limegreen url(../../img/hodds.png) no-repeat scroll 0 0;
}

＆＃13;

<table>
  <tr>
    <td class="oddsselected"><a href="#" target="_blank" title="Click">value</a>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里有一些代码只使用填充来获得相同的效果。它也消除了＆＃39; px＆＃39;测量，除了一些非常具体的情况外，不应该在网上使用。

＆＃13;

＆＃13;

tr.match td.oddsselected {
  padding: 0;
  margin: 0;
  text-align: center;

}
.oddsselected a {
  background: skyblue url(../../img/odds.png) no-repeat scroll 0 0;
  display: block;
 
  /* horizontally centers the text */
  text-align: center;

  /* vertically centers it - 28px height - 8px top padding = 20px */
  padding: 1em;
  font-size: 1em;
  height: 100%;
  width: 100%;
  color: #fff;
}
.oddsselected a:hover {
  background: limegreen url(../../img/hodds.png) no-repeat scroll 0 0;
}

＆＃13;

<table>
  <tr>
    <td class="oddsselected"><a href="#" target="_blank" title="Click">value</a>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;