CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user7030651
user7030651

Reputation:

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.

Upvotes: 0

Views: 561

Answers (2)

Marvin
Marvin

Reputation: 10092

The text is not centered because you set an explicit width to your button that simply is too small for the text.

Remove width: 100px !important from your .mail_download_csv_btn and the text gets the space needed for being centered.

enter image description here

If you want all buttons to have the same size, you should not set an explicit width as you can't know how much space the widest button will take in different browsers. Instead try something like setting all buttons to the width of the widest button.

Upvotes: 0

Ultrazz008
Ultrazz008

Reputation: 1688

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>

Upvotes: 1

Related Questions