Here a small demo of my issue...

```html
<html>

<body>
  <span style="border: 1px solid black; background-color: #CCCCFF"> My text 
      <img style="width: 1em; height: 1em; vertical-align: middle;" 
      src="http://files.softicons.com/download/social-media-icons/stucco-social-media-icons-by-bradley-siefert/png/64x64/stucco-facebook.png"> My text </span>
</body>

</html>
```

As you can see I have styled the image `vertical-align: middle` but still the image is misplaced at the bottom. 

How do I get it centered between the top and bottom borders?

**EDIT:** Here's a good rundown of this issue:

<http://phrogz.net/css/vertical-align/>