Spannen innerhalb Knopf nimmt ganze Höhe

Question

Ich habe einen Knopf mit einem Span-Symbol drin. Ich möchte, dass das Symbol etwas vertikaler von dem Text in der Schaltfläche zentriert wird, aber der Bereich nimmt die gesamte Höhe der Schaltfläche. Auf diese Weise bewegt sich der Text auch, wenn ich den Rand mit dem Text abdecke.

https://jsfiddle.net/DTcHh/26184/

habe ich die background-color:red; legte mein Problem zu zeigen.

Ich denke nicht, dass es eine saubere Lösung für sie ist, wenn sie eine Standardhöhe hat.

button { 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0px 40px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
span.glyphicon-envelope { 
 
    padding-left: 20px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    font-size: 18px; 
 
    ; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button> 
 
    Send 
 
    <span class="glyphicon-envelope"></span> 
 
</button>

Answer 1

Versuchen Sie, die line-height: 50px; entfernen. Auch dein Fingerzeig deutet auf etwas anderes hin?

span.glyphicon-envelope { 
    padding-left: 20px; 
    background-color: red; 
    display: inline-block; 
    font-size: 18px; 
    position: relative; 
    top: 2px; 
} 

Answer 2

Reduzieren der Zeilenhöhe und entfernen Polsterung in span.glyphicon-Umschlag

button { 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 0; 
 
    padding: 0px 40px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
span.glyphicon-envelope { 
 
    padding-left: 1px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    line-height: 16px; 
 
    font-size: 18px; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<button> 
 
    Send 
 
    <span class="glyphicon-envelope"></span> 
 
</button>

Answer 3

ändern button Anzeige table-cell und fügen vertical-align: middleglyphicon-envelope

zu überspannen

button { 
 
    height: 50px; 
 
    display: table-cell; 
 
    margin: 0; 
 
    padding: 0px 40px; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 
span.glyphicon-envelope { 
 
    padding-left: 20px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    font-size: 18px; 
 
    vertical-align: middle; 
 
}

Sehen Sie ein Beispiel: https://jsfiddle.net/pdz696pv/2/

Answer 4

Man könnte auch einfach tun:

span.glyphicon-envelope { 
position: relative; 
top: 2px; 
} 

den Wert der Top-Eigenschaft ändern, wird es kann nach oben und unten (Sie unten als auch verwenden offensichtlich).

Dies ist eine einfache Lösung, wenn Sie keine der anderen Eigenschaften des Umschlags ändern möchten.