Rishi Rishi - 14 days ago 8
CSS Question

Text not centered inside button

I have two buttons,one of the button text is not in the center of the button.



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





The text Download CSV is not centered to the button.
Any help would be great.

Thank You.

Answer

It is centered, just your buttons width is limited, and the text overflow on right side, change:

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

to

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

I were setted width to a 125px, if you wish to have buttons the same width, otherwise, just delete width tag, if you wish to be auto.

Example with larger 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>