html - Vertically-aligned inline-block element not perfectly centered within container

Question

I'm trying to use vertical-align: middle to vertically center an inline-block element within some text.

p {
  background: red;
  line-height: 20px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}

<p>
  <span></span>
  &lt;-- Not perfectly aligned
</p>

Answer 1

vertical-align: middle; was never meant to center the element. Here is a more trivial example to better see:

p {
  background: 
    linear-gradient(yellow,yellow) center/100% 1px no-repeat, /* the center */
    red;
  line-height: 80px;
  font-size:80px;
  display: block;
}

span {
  height: 18px;
  width: 18px;
  display: inline-block;
  background: lightblue;
  vertical-align: middle;
}

<p>
  <span></span>
  &lt;-- Not aligned
</p>