Question

我正在尝试将按钮中的文本与字体真棒图标垂直对齐。这是我试过的代码：

<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也无效。这有什么问题？

Answer 1

只需使用vertical-align：middle和图标

Answer 2

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

查看http://jsfiddle.net/koh8jkyb/

上正在运行的代码

Answer 3

试试这个

<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/

Answer 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>

垂直中心文本与按钮中的字体真棒图标

4 个答案: