Wie erstelle ich eine Anker-Schaltfläche mit fester Höhe und Breite und zentriertem Text?

Question

Das mag trivial erscheinen, aber ich ging durch viele vorgeschlagene Lösungen und fand nichts. Das Ziel ist, einen Anker <a> Button mit fester Höhe und Breite zu erstellen, während der Text unabhängig von der Textbreite (vertikal und horizontal) zentriert bleibt.

Beispiel:

Answer 1

Die beste Lösung erreicht war ich folgendes:

1. eine vertikale Mittelklasse definieren:

   .text-vertical-center { 
       display: table-cell; 
       text-align: center; 
       vertical-align: middle;} 
   

   Dies als Innenbehälter diente der Schaltfläche, um den Text vertikal und horizontal zu zentrieren Verbündete.

2. eine BTN Klasse definieren:

   .btn { 
       width: 300px; 
       height: 75px; 
       background-color: transparent; 
       color: #000; 
       border-radius: 0; 
       border: #000 solid 1px; 
       cursor: pointer; 
       text-align: center;} 
   

   Die Klasse BTN-Server für den Button Styling.

3. Ich wickelte schließlich die innere div mit einem Anker-Tag <a> die Taste zu verknüpfen:

<a href="#"> 
    <div class="btn text-vertical-center"> 
     Button text 
    </div> 
</a> 

Dies scheint gut zu funktionieren und ist mit den meisten Browsern kompatibel, soweit ich kennt. Bitte lassen Sie mich wissen, ob es bessere Lösungen gibt.

JSFiddle Beispiel: https://jsfiddle.net/MuaazO/ga4s540v/