文本不在按钮内居中

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>

Answer 2

文本未居中，因为您为按钮设置了明确的宽度，而该宽度对于文本来说太小了。

从width: 100px !important移除.mail_download_csv_btn，文字会获得居中所需的空间。

如果您希望所有按钮具有相同的大小，则不应设置显式宽度，因为您无法知道最宽按钮在不同浏览器中将占用多少空间。 而是尝试类似setting all buttons to the width of the widest button的内容。