按鈕內的跨度需要整個高度

我有一個帶有跨度圖標的按鈕。我希望圖標以按鈕內部的文本爲中心更加垂直，但是跨度取得按鈕的整個高度。這樣，當我將文本放在頁邊空白處時，文字也會移動。按鈕內的跨度需要整個高度

我已經把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>

來源

2016-10-12 C.Ronaldo

嘗試取出line-height: 50px;。你的jsfiddle也指向別的東西嗎？

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

來源

2016-10-12 12:11:37

Ups，你是對的，忘了點擊更新。謝謝你的回答，在2分鐘內點擊接受 –

順便說一下，你可能知道爲什麼，當我爲圖標添加margin-top時，它也會移動按鈕內的文本？ –

@ C.Ronaldo你可以在圖標上放置相對位置，像這樣推像素（也可以像Paul Knight提到的那樣）。我會更新我的答案。 –

減少行高和除去填充在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>

來源

2016-10-12 12:12:46 Dhaarani

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/

來源

2016-10-12 12:14:33 Roberto14

你也可以只做到：

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

更改頂級物業的價值將它上下移動（你可以使用底部以及明顯）。

如果您不希望更改信封的任何其他屬性，這是一個簡單的解決方案。

來源

2016-10-12 12:26:16

按鈕內的跨度需要整個高度

回答

相關問題