Vertically align image with text within <li>

Question

I'm trying to vertically align text with an image (or vice-versa?). Here's some code:

<div class="row">
  <div class="col-md-3">col-md-3
    <ul>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
    </ul>
  {# 3 more columns like this #}
</div>

also CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div ul li {
    display: table-row;
}    

img {
    float: left;
    margin: 0 0 10px 0;
    padding: 2px;
    vertical-align: middle;
}

also, might be important all images are the same fixed size, let's say 60x60 like in example and I can not use it as a background. How can I align it? Thanks.

Update: as were pointed out, I'm looking for text to be in the middle of the right edge of the picture, thanks.

Answer 1

My solution works with one line of text as well as multiple lines.

Working Fiddle Tested on: IE10, IE9, IE8, Chrome, FF, Safari

HTML: same as you posted

I'm assuming you meant middle alignment. if not: use top | bottom instead of middle

CSS

*
{
    padding: 0;
    margin: 0;
}
ul
{
    list-style-type: none;
}

div ul li
{
    margin: 5px;
}    

img
{
    vertical-align: middle; /* | top | bottom */
}
div ul li p
{
    display: inline-block;
    vertical-align: middle; /* | top | bottom */
}