Safari auf iOS kann Button Text Center nicht ausgerichtet ausrichten?

Question

Ich versuche, ein <button> mit großem Text („300kr“ weiter unten) zu machen:

Aber wie man sehen kann, wenn ich den <button> Tag und eine große Schriftgröße zu verwenden, wird der Text linksbündig von der Mitte der Schaltfläche (Bild 2). Es wird in allen anderen Browsern, die ich überprüft habe, angezeigt. Ist das ein Safari iOS Bug?

CSS-Code für die Schaltfläche:

background-color: rgb(0, 0, 0); 
border-color: rgb(0, 0, 0); 
border-top-left-radius: 100px; 
border-top-right-radius: 100px; 
border-bottom-right-radius: 100px; 
border-bottom-left-radius: 100px; 
border-width: 5px; 
box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px; 
color: rgb(255, 255, 255); 
font-family: KGEmpireofDirt; 
font-size: 72px; 
font-weight: 300; 
opacity: 1; 
transform: rotate(-20deg); 
text-align: center; 
width: 100%; 
height: 100%; 
border-style: solid; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
display: inline-block; 
position: relative; 
text-decoration: none; 
font-family: Helvetica, sans-serif; 
font-weight: 700; 
background-color: #6ec8dc; 
color: #fff; 
border-radius: 6px; 
border: 0; 
font-size: 100%; 
-webkit-appearance: none 
outline: 0; 
resize: none; 

HTML:

<a weld-element="" id="button-5762" class="weld-element weld-container weld-button ng-scope" ng-href="" style="height: 172.23703002929688px; left: 27.243403116862197%; top: 647.8621179414583px; width: 177.01909383137794px; z-index: 103;"> 
    <button class="weld-child apply-styles ng-binding" id="button-5762-btn" ng-hide="isEditing" style=" 
     background-color: rgb(0, 0, 0); 
     border-color: rgb(0, 0, 0); 
     border-top-left-radius: 100px; 
     border-top-right-radius: 100px; 
     border-bottom-right-radius: 100px; 
     border-bottom-left-radius: 100px; 
     border-width: 5px; 
     box-shadow: rgba(0, 0, 0, 0.572549) 0px 7px 34px; 
     color: rgb(255, 255, 255); 
     font-family: KGEmpireofDirt; 
     font-size: 50px; 
     font-weight: 300; 
     /* letter-spacing: 0.03em; */ 
     opacity: 1; 
     transform: rotate(-20deg); 
     text-align: center;">300kr</button> 
</a> 

Answer 1

Die Lösung war eine explizite padding: 0 für die Taste. Es stellt sich heraus, dass Safari iOS ein anderes User Agent Stylesheet als Safari für macOS hat, wobei padding standardmäßig auf 1em gesetzt ist.