Hilfe Hilfe Größenänderung und vertikale Zentrierung Schriftart in einer Schaltfläche, wenn die Fensterbreite allmählich abnimmt

Question

Ich habe eine Schaltfläche, die ein wenig Text enthält. Die Art und Weise, wie die Schaltfläche aktuell eingerichtet ist, ist, dass bei einer Verringerung der Fensterbreite auch die vertikale Höhe der Schaltfläche basierend auf der Fensterbreite abnimmt. Wenn ich die Breite nach und nach verändere, möchte ich auch, dass der Text innerhalb der Schaltfläche allmählich abnimmt und gleichzeitig immer vertikal in der Mitte der Schaltfläche bleibt. Ich kann derzeit nicht herausfinden, wie man das zur Arbeit bringt. Wenn ich jetzt die Fensterbreite neu skaliere und die vertikale Höhe abnimmt, bleibt der Text groß und nicht vertikal zentriert.

Ich könnte Medienabfragen verwenden, aber dies würde erfordern, dass ich zahlreiche Medienabfragen für verschiedene Breiten erstellen.

Ich habe versucht, verschiedene Dinge zu versuchen, um dies zu implementieren, aber ich kann es nicht funktionieren. Ich würde es wirklich schätzen, wenn jemand mir eine Schablone einer css-Klasse zeigen könnte, die diese Funktionalität zur Verfügung stellen würde.

Dies ist CSS-Klasse I derzeit für die Taste am:

.buttonClass{ 
    position: absolute; 
    line-height: 3em !important; 
    height: 12.5%; 
    width: 25%; 
    bottom: 1%; 
    right: 0.25%; 
} 

Answer 1

Vielleicht eine Darstellungsbreite für Ihre font-size versuchen Sie es mit:

.buttonClass { 
    position: absolute; 
    font-size: 2vw; 
    line-height: 3em; 
    height: 12.5%; 
    width: 25%; 
    bottom: 1%; 
    right: 0.25%; 
} 

Als Referenz 1VH = .01 * Ansichtsfensterhöhe Hier ist eine Fiddle. Hoffe das hilft.