垂直居中文本与按钮中的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也不能正常工作。这里有什么问题？

尝试'显示：表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

答

只需使用垂直对齐：中间有图标

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/

请在您的实际解决方案中添加更多信息;不要只发布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/

答

尝试这个：

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>

垂直居中文本与按钮中的fontawesome图标

相关推荐