Vertically align Text to middle of an image

Question

I've got a list with a couple of list items containing text. I'm adding an image to each list item using the :before pseudo. The image is noticeably bigger than the text, so how can I align the text or image in the middle?

Thank you

-

What I currently see

What I want to achieve

HTML

<ul class="stats">
    <li class="messages">2</li>
    <li class="sales">15</li>
</ul>

CSS

.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.stats .messages:before {
  content: url(../images/messages.png);
  opacity: 0.2;
}
.stats .sales:before {
  content: url(../images/basket.png);
  opacity: 0.2;
}

Answer 1

You need to try this.

<ul class="stats"> <li><img src="../images/messages.png" style="vertical-align:middle;">2</li> <li><img src="../images/basket.png" style="vertical-align:middle;">15</li> </ul>

Answer 2

I have made some changes in your styles as well as html, try this

<style>
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.stats .messages:before {
  content: url(../images/messages.png);
  opacity: 0.2;
  float:left;
}
.stats .sales:before {
  content: url(../images/basket.png);
  opacity: 0.2;
}

</style>

<ul class="stats">
    <li class="messages"><div style="margin-top:1px;float:left;">2</div></li>
    <li class="sales"><div style="margin-top:1px;float:left;">15</div></li>
</ul>

Answer 3

Ive just found a way to do this. Cant believe I didn't try this before posting.

    .stats .messages:before {
        content: url(../images/messages.png);
        opacity: 0.2;
        position: relative;
        top: 10px;
    }

Answer 4

Add:

.stats li { line-height: 22px; }

... where 22px is the height of yours icons.

Answer 5

use .stats li{ line-height: [height of image ]; }