Html 对齐按钮内的内容

我使用谷歌材质图标在按钮文本前添加“播放”徽标。但是，插入图标后，文本和图标都会稍微移出其位置，并且不会保持其中心对齐。如何使它们保持对齐

。播放{
边框：1px纯黑；
边界半径：20px；
填充：5px25px；
文本转换：大写；
利润率：10px；
背景色：透明；
颜色：黑色；
}
.播放：：之前{
字体系列：“材质图标”；
内容：“玩一圈填一圈”；
位置：相对位置；
文本转换：小写；
字号：18px；
}

播放成视频

下面是一种更改伪元素字体大小的方法

.play::before{
  font-family: 'Material Icons';
  content: 'play_circle_filled';
  position: relative;
  text-transform: lowercase;
  font-size: inherit;
  top:1px;
  left:-4px;
}

我不知道它是否适合你。这只是一种尝试。 多谢各位

。播放{
边框：1px纯黑；
边界半径：20px；
填充：5px25px；
文本转换：大写；
利润率：10px；
背景色：透明；
颜色：黑色；
}
.播放：：之前{
字体系列：“材质图标”；
内容：“玩一圈填一圈”；
位置：相对位置；
文本转换：小写；
字体大小：继承；
顶部：1px；
左：-4px；
}

JS-Bin
播放成视频

下面是一种更改伪元素字体大小的方法

.play::before{
  font-family: 'Material Icons';
  content: 'play_circle_filled';
  position: relative;
  text-transform: lowercase;
  font-size: inherit;
  top:1px;
  left:-4px;
}

我不知道它是否适合你。这只是一种尝试。 多谢各位

。播放{
边框：1px纯黑；
边界半径：20px；
填充：5px25px；
文本转换：大写；
利润率：10px；
背景色：透明；
颜色：黑色；
}
.播放：：之前{
字体系列：“材质图标”；
内容：“玩一圈填一圈”；
位置：相对位置；
文本转换：小写；
字体大小：继承；
顶部：1px；
左：-4px；
}

JS-Bin
播放成视频

只需添加

对齐项目中心

，并使按钮

d-flex

也

<div class="container d-flex align-items-center justify-content-center buttons">
    <button type="button" class="play d-flex align-items-center"><span class="playicon"></span> Play into video</button>
</div>

播放成视频

---

注意：您不需要

flex-row

，因为flex-direction:row是默认值。

只需添加

align items center

，并使按钮

d-flex

也

<div class="container d-flex align-items-center justify-content-center buttons">
    <button type="button" class="play d-flex align-items-center"><span class="playicon"></span> Play into video</button>
</div>

播放成视频

---

注意：您不需要

flex-row

，因为flex-direction:row是默认值。

谢谢，我以为我已经在按钮上尝试了“对齐项目中心”，但我想我没有。谢谢，我以为我已经在按钮上尝试了“对齐项目中心”，但我想我没有。