CSSでボタンとテキストの位置を調整できない

リンクボタンを作ろうと思っています。
bootstrapのボタンを最小にしましたが大きすぎるので自分で調整しようと思いました。
ボタンのサイズまでは調整できたのですが、上と左に大きなスペースができてしまい、どうしても文字を中央に配置することができません。
画面はこのような状況です。
、
このAUDIOの文字をボタンの中心に持ってきたいと思っています。
HTMLのソースは以下です。

HTML
1<a class="btn btn-primary audio_button" href="library/audio_list?stat=2&id=3">AUDIO</a>

CSSは以下です。

.audio_button {
    height:18px;
    width:40px;
    font-size: 10px;
    text-align: left;
    vertical-align: top;
}

宜しくお願いします。

行動規範の内容に同意します

回答2件

提示いただいたcssでは背景が青くなる要素がありません
よって他のcssがあたっているものと思われます

Chromeのデベロッパーツールで他にcssがあたっていないか確かめましょう

投稿2021/06/23 11:08

jinba

総合スコア310

takinogawa047

2021/06/23 15:12

青はbootstrapです。ありがとうございました。

行動規範の内容に同意します

ベストアンサー

余白は適当に調整して下さい

css
1.audio_button {
2    height:auto;
3    width:auto;
4    font-size: 10px;
5    text-align: left;
6    vertical-align: top;
7    padding:3px !important; 
8    line-height:100% !important;
9}