html - 如何在 <button> 标签中垂直居中 <i> 标签？

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 看起来如何:)