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

Answer 3

button#submit {
  height: 30px;
  line-height: 30px;
}

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

这应该这样做。

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

3 个答案: