Vince Carter Vince Carter - 1 month ago 7
CSS Question

CSS: Center image link inside a table row

I need help to center a link with background image inside a table cell.



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

Since your a is displaying as a block element, you'll need to set the alignment rules for the text on that.

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;
}
<table>
  <tr>
    <td class="oddsselected"><a href="#" target="_blank" title="Click">value</a>
    </td>
  </tr>
</table>

Comments