Question

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

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>

完美的垂直图标居中于文本旁边

1 个答案: