CSS line-height Eigenschaftsproblem

Question

Ich fügte einen Material-sich hin- und herbewegenden Knopf meiner Web site hinzu und die Funktionalität arbeitet tadellos, wie ich es wünsche. Das einzige Problem, das ich habe, ist, dass die Symbole, die ich für sie eingerichtet habe, nicht zentriert erscheinen, sondern oben auf der Schaltfläche angezeigt werden. Es scheint, dass die css line-height nicht funktioniert.

Bild von dem, was auf meiner Webseite erscheint: Icon at top of Button

Verbindung für Material Schwimmdock Button: Material-Floating Button

Link for Demo von wo das Symbol sein sollte: Demo

HTML-Code:

Teil des CSS-Codes:

.mfb-component__button--main, .mfb-component__button--child { 
    background-color: #E40A5D; 
    display: inline-block; 
    position: relative; 
    border: none; 
    border-radius: 50%; 
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 
    cursor: pointer; 
    outline: none; 
    padding: 0; 
    position: relative; 
    -webkit-user-drag: none; 
    color: #f1f1f1; } 

/** 
* This is the unordered list for the list items that contain 
* the child buttons. 
* 
*/ 
.mfb-component__list { 
    list-style: none; 
    margin: 0; 
    padding: 0; } 
    .mfb-component__list > li { 
    display: block; 
    position: absolute; 
    top: 0; 
    right: 1px; 
    padding: 10px 0; 
    margin: -10px 0; } 

/** 
* These are the basic styles for all the icons inside the main button 
*/ 
.mfb-component__icon, .mfb-component__main-icon--active, 
.mfb-component__main-icon--resting, .mfb-component__child-icon { 
    position: absolute; 
    font-size: 18px; 
    text-align: center; 
    line-height: 56px; 
    width: 100%; } 

.mfb-component__wrap { 
    padding: 25px; 
    margin: -25px; } 

Answer 1

Ich denke, Sie haben Recht mit der Zeilenhöhe. Gibt es irgendwo eine andere CSS-Regel, die es übertreibt? Versuchen Sie hinzuzufügen und wichtig, um es ein bisschen besser zu zielen.

line-height: 56px !important; 

Wenn das nicht funktioniert, einige übergeordneten Elemente hinzufügen, bevor Sie CSS-Regel wie #menu und .mfb-component__wrap sind

#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{ 
    position: absolute; 
    font-size: 18px; 
    text-align: center; 
    line-height: 56px; 
    width: 100%; } 

Wenn keine der oben genannten Arbeit nur ‚oben‘ verwenden, wie stattdessen eine Problemumgehung.

#menu .mfb-component__wrap i.mfb-component__main-icon--active.ion-close-round{ 
    position: absolute; 
    font-size: 18px; 
    text-align: center; 
    line-height: 0px; 
    width: 100%; 
    top: 17px; } 

Hoffe, dass es für Sie sortiert!