ボタンの中央にテキストが配置されていません

Question

2つのボタンがあり、ボタンのテキストの1つがボタンの中央にありません。

.mail_download_csv_btn{ 
 
    width: 100px !important; 
 
    font-size: 12px !important; 
 
} 
 

 
.margin_right_10{ 
 
    margin-right:10px; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button> 
 
       <button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button> 
 
      

テキストダウンロードCSVはボタンにセンタリングされていません。
助けがあれば助かります。

ありがとうございます。

Answer 1

それが中央に配置され、ちょうどあなたのボタンの幅が限られており、右側にテキストオーバーフロー、変更：

.mail_download_csv_btn{ 
    width: 100px !important; 
    font-size: 12px !important; 
} 

.mail_download_csv_btn{ 
    width: 125px !important; 
    font-size: 12px !important; 
} 

にあなたなら、私は、125pxにwidthをsettedましたボタンを同じ幅にしたい場合は、widthタグを削除してください。私は、ボタンの両方が同じになるように幅たい

.mail_download_csv_btn{ 
 
    width: 125px !important; 
 
    font-size: 12px !important; 
 
} 
 

 
.margin_right_10{ 
 
    margin-right:10px; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<button type="button" class="btn btn-info height_30 width_110 mail_download_csv_btn">Download CSV</button> 
 
       <button type="button" class="btn btn-info height_30 width_110 margin_right_10 mail_download_csv_btn">Mail PDF</button>

Answer 2

テキストが小さすぎるボタンに明示的な幅を設定するため、テキストが中央に配置されません。

.mail_download_csv_btnからwidth: 100px !importantを削除し、テキストの中央揃えに必要なスペースが得られます。

あなたはすべてのボタンが同じサイズを持っているしたい場合は、最も広いボタンが別のブラウザになりますどのくらいのスペースを知ることができないとして、あなたは明示的な幅を設定しないでください。 代わりにsetting all buttons to the width of the widest buttonのようなものを試してください。