如何在<i>标记中垂直对齐<button>标记？

Question

我有这样的按钮标签：

<button id="submit" style="height: 30px;">
   <i id="loginLoadIcon" class="spinnerIcon"></i>
   <span>Log in</span>
</button>

它使用这样的css：

.spinnerIcon {
    width: 25px;
    height: 25px;
    background: transparent url('images/spinnerIcon.png') repeat-x 0 0;
}

如何在按钮标签中垂直对i标签？按钮可以调整大小，图像必须保持垂直居中。

Answer 1

不如：

#submit{
  position: relative;
}

#submit::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 100%;
  background: transparent url('images/spinnerIcon.png') no-repeat left center;
}

不再需要<i>了。您可能也可以松掉<span>标记，但我不知道其余的CSS看起来如何:)

Answer 2

CSS vertical-align:middle将为您设置中心。

<i style="vertical-align:middle" id="loginLoadIcon" class="spinnerIcon"></i>

不过，你也可以这样做：

HTML

<button id="submit" style="height: 30px;">
   Log in
</button>

CSS

button{
    font-weight:italic;
}