Rishi Rishi - 11 days ago 5
HTML Question

text not center of button

i have two buttons

one of the button text is not 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>