完美的垂直图标居中于文本[重复]旁边

Question

此问题已经在这里有了答案：

How to Vertical align elements in a div? （28个答案）

Flexbox: center horizontally and vertically （12个答案）

[<10天前关闭。

我想在文字旁建立一个链接，上面有象征游戏的图片。做这个的最好方式是什么？我写了这段代码，但我认为它并不是垂直居中。我怎样才能使它居中？

a:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background: url(https://img.icons8.com/material-sharp/24/000000/circled-play.png) center / cover no-repeat;
  margin-left: 5px;
}

<a href="#">Watch video</a>

Answer 1

您可以像使用flexbox一样，这样会将图片垂直居中放置。查看以下解决方案：

a {
  display :flex;
  align-items:center;
}
a:after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(https://img.icons8.com/material-sharp/24/000000/circled-play.png) center / cover no-repeat;
  margin-left: 5px;
}

<a href="#">Watch video</a>