html - Vertically align Text to middle of an image -


i've got list couple of list items containing text. i'm adding image each list item using :before pseudo. image noticeably bigger text, how can align text or image in middle?

thank you

-

what see

enter image description here

what want achieve

enter image description here

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; } 

add:

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

... 22px height of yours icons.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -