css - 如何根据按钮的大小修复按钮中未对齐的图标

Question

我没有使用特定的框架，而是创建了我自己的图标字体。但是，当我在按钮内写出图标时，它很好，但如果我更改按钮的高度，图标往往会错位，上面有一个空间将其推得太低。有人对如何以稳定的方式进行这项工作有任何想法吗？

尝试了 line-height 和使用 flex，但是 flex 移动了整个按钮。并且 line-height 没有任何变化。

<button class="button icon"><i class="icon-plus" /></button>

.button {
...
 &::after {
      content: '\e00E';
      font-family: $font-family-icons;
      color: $white;
      font-size: 1.2rem;
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: calc(50% - 0.6rem);
      left: calc(50% - 0.6rem);
      @include animation-zoom-in();
    }
}

i {
  position: relative;
  font-family: YouCruitIconFont, sans-serif !important;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  font-size: inherit;
  -webkit-font-smoothing: antialiased;

  & + span {
    vertical-align: middle;
    margin-left: 0.5rem;
  }
}

Answer 1

你试过吗

.button {
...
 &::after {
      content: '\e00E';
      position:absolute;
      font-family: $font-family-icons;
      color: $white;
      font-size: 1.2rem;
      width: 1.2rem;
      height: 1.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%, -50%);
      @include animation-zoom-in();
     }
}