html - 文本不在按钮内居中

Question

我有两个按钮，其中一个按钮的文字不在按钮的中央。

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

我将 width 设置为 125px，如果你希望按钮具有相同的宽度，否则，如果你希望是自动的，只需删除 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>