Vertically-aligned Inline-block Element Not Perfectly Centered Within Container

I'm trying to use vertical-align: middle to vertically center an inline-block element within some text. Notice that the element isn't perfectly centered... why is this? Is this a

Solution 1:

Your code has comments and text is not in span. Try this:

<p>
  <span>Not perfectly aligned</span>
</p>


p {
  background: red;
}

span {
  display: inline-block;
  background: lightblue;
  vertical-align: top;
}