スパン内ボタンは全体の高さを取ります

Question

ボタンの内側にスパンアイコンがあります。ボタンの内側のテキストを中心にしてアイコンを少し縦向きにしたいが、スパンはボタンの全体の高さをとっている。この方法で、余白部分にテキストを置くと、テキストも移動します。

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

私は私の問題を表示するbackground-color:red;を入れています。

私は標準的な高さを与えることはそれのためのクリーンな修正だとは思わない。

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

line-height: 50px;を削除してください。また、あなたのjsfiddleはそれが他の何かを指していますか？

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

Answer 2

行の高さを削減し、テーブルのセルにspan.glyphicon-封筒に

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

変更button表示をパディングを削除してまたがるようvertical-align: middleを追加glyphicon-envelope

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; 
 
}

例を参照してください：https://jsfiddle.net/pdz696pv/2/

Answer 4

また、単に行うことができます：topプロパティの値を変更する

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

は、それを上に移動し、ダウン（あなたは明らかとしてウェル底を使用することができます）。

エンベロープのその他のプロパティを変更しない場合は、これは簡単な解決方法です。