垂直居中文字，按钮中有一个字体图标

Question

I am trying to vertical-align the text in a button with a font awesome icon. This is the code I tried:

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

Fiddle: http://jsfiddle.net/koh8jkyb/

line-height is also not working. What's the problem here?

Answer 1

只需在图标上使用vertical-align：middle

Answer 2

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

Check out the running code at http://jsfiddle.net/koh8jkyb/

Answer 3

try this

<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

Try this:

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>