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はブロック要素として表示されているので、あなたはその上のテキストの整列ルールを設定する必要があります。

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>

Answer 2

ここだけ同じ効果のためのパディングを使用して、いくつかのコードです。また、いくつかの非常に特殊な場合を除いて、ウェブ上で使用すべきでない 'px'測定値も取り除きます。

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

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