垂直居中文本與按鈕中的fontawesome圖標

我想垂直對齊與字體真棒圖標的按鈕中的文本。這是我試過的代碼：垂直居中文本與按鈕中的fontawesome圖標

<button class="btn btn-primary"><span style="padding-top: -50px;">Sign in with</span> 
<i class="fa fa-linkedin-square" style="font-size:3em;"></i></button>

小提琴：http://jsfiddle.net/koh8jkyb/

line-height也不能正常工作。這裏有什麼問題？

來源

2014-12-05 John Nick

嘗試'顯示：表cell'和'垂直對齊：middle' – 2014-12-05 03:58:07

但是，使圖標進入新的行HTTP： //jsfiddle.net/koh8jkyb/2/ – 2014-12-05 03:59:44

http://jsfiddle.net/koh8jkyb/5/ – Christina 2014-12-05 07:31:18

只需使用垂直對齊：中間有圖標

來源

2014-12-05 03:59:45 aashi

http://jsfiddle.net/aashi/koh8jkyb/1/ demo – aashi 2014-12-05 04:00:11

使用style="font-size:3em;vertical-align:middle;"

退房在http://jsfiddle.net/koh8jkyb/

來源

2014-12-05 04:00:48 Dhaval

請在您的實際解決方案中添加更多信息;不要只發布JSFiddle鏈接！ – 2014-12-05 04:39:09

運行代碼試試這個

<button class="btn btn-primary"> 
<span style="padding: 10px;display: block;float: left;">Sign in with</span> 
<i class="fa fa-linkedin-square" style="font-size:3em;float: right;"></i> 
</button>

http://jsfiddle.net/koh8jkyb/4/

來源

2014-12-05 04:05:55 Cattla

嘗試這個：

CSS：

.center-content { 
    display:table-cell; 
    vertical-align:middle; 

}

HTML：

<button class="btn btn-primary"> 
    <span class="center-content">Sign in with</span> 
    <span class="center-content"> 
     <i class="fa fa-linkedin-square" style="font-size:3em;"></i> 
    </span> 
</button>

來源

2014-12-05 04:07:05

垂直居中文本與按鈕中的fontawesome圖標

回答

相關問題