css - CSSアンカーは、画像またはテキストを囲むボタンのように見えます

Question

HTML アンカー タグをボタンのように見せるトピックに関するさまざまな議論を調べましたが、問題が発生しました。私のCSSは次のとおりです。

a.button:link   { font-family: sans-serif;
    font-weight: bold;
    font-size: 80%;
    text-align: center;
    text-decoration: none;
    background-color: #E0E0E0;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-bottom: 3px solid #404040;
    border-right: 3px solid #404040;
    color: black;
    padding: 4px 12px 4px 12px;
    /*display: inline-block;*/
    }

アンカーで囲むのが画像の場合は、display: inline-block を指定する必要があります。そうしないと、アンカーはデフォルトでインライン タグであるため、画像が占める四角形全体をスタイルがカバーしません。しかし、inline-block を指定してテキストをアンカー内に囲むと、テキストが正しく配置されません。たとえば、http://www.jamescobban.net/database/CensusForm1901.php?Province=&District=58&SubDistrict=A&Division=1&Page=1を参照してください。ボタンに画像またはテキストが含まれているかどうかにかかわらず、ボタンのようなアンカーに 1 つのクラスを使用できるようにしたいと考えています。