Text nicht zentriert innerhalb Taste

Question

Ich habe zwei Tasten, einer der Schaltfläche Text ist nicht in der Mitte der Taste.

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

Der Text herunterladen CSV ist nicht auf die Schaltfläche zentriert.
Jede Hilfe wäre großartig.

Vielen Dank.

Answer 1

Es zentriert ist, nur Ihre Tasten Breite begrenzt ist, und der Text Überlauf auf der rechten Seite ändern:

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

zu

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

I wurden width zu einem 125px gefassten, wenn Sie Ich wünsche, Tasten mit der gleichen Breite zu haben, ansonsten löschen Sie einfach width Tag, wenn Sie automatisch sein möchten.

Beispiel mit größerer Breite:

.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

Der Text ist nicht zentriert, weil Sie eine explizite Breite für Ihre Schaltfläche festlegen, die einfach zu klein für den Text ist.

Entfernen Sie width: 100px !important von Ihrem .mail_download_csv_btn und der Text bekommt den Platz für die Zentrierung benötigt.

Wenn Sie alle Tasten wollen die gleiche Größe haben, sollten Sie keine explizite Breite einstellen, da Sie nicht wissen, wie viel Raum die breiteste Taste in verschiedenen Browsern nehmen. Stattdessen versuchen Sie etwas wie setting all buttons to the width of the widest button.