Perfect vertical icon centering next to the text

Question

I want to make a link with a picture symbolizing play next to the text. What is the best way to do this? I wrote this code, but I don't think it's perfectly centered vertically. How can I center it perfectly?

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>

score 1 · Answer 1 · answered Jun 05 '20 at 18:33

1

You can use flexbox like, this will place your picture vertically center. Check out the solution below:

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>

answered Jun 05 '20 at 18:33

prashant shekhar singh

71
1

vertical-align property works properly for the element with display as table-cell. – prashant shekhar singh Jun 05 '20 at 18:34
And there's something you can do to make this element act like a normal one, not 100% wide? – Jun 05 '20 at 18:37
if you want your link to be inline use `display:inline-flex` in place of `display:flex` – prashant shekhar singh Jun 05 '20 at 18:38
This works perfectly, thanks! :D – Jun 05 '20 at 18:40

Perfect vertical icon centering next to the text

1 Answers1