make the element in the div align vertically middle

This is the live example:

http://jsfiddle.net/NjnAF/

The div#con is the search result panel,I want the开发者_运维问答 search item displayed in the list manner with the icon and text.

Now I can not make the icon align middle vertically and make the text the "1" "2" just in the center of the image.

Any suggestion?

---

I used :

div.item div.img {
   float: left;
   width: 22px;
   height: 25px;
   background-image: url('http://i.stack.imgur.com/NpSHB.gif');
   background-repeat: no-repeat;
   background-position: center left;
   text-align: center;
   vertical-align: middle;
}

and I have updated the fiddle. Is that what you needed?

---

Use line-height - vertical alignment: block level elements, like a div do not have any effect with vertical alignment. You would need to use line-height or use absolute positioning with div as relative.

---

you need to modify the CSS

    div.item div.img{ text-align:center;
                      margin-top:2px;  /*can change this according to your need */
                    }

Add these two properties. Vertical align will not work. Fiddle http://jsfiddle.net/NjnAF/2/