Vertically align image with text within <li> - html

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 */
}

Answer 2

Just remove the <p> tag and the float:left from img and you got it.
Demo at http://jsfiddle.net/BA2Lc/

Answer 3

I am not a big fan of using those table display options, had some bad cross-browser experiences with them.
Seems to me you could use line-height here. Something like this:
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
div ul li {
line-height: 60px;
}
img {
float: left;
margin: 0 0 10px 0;
padding: 2px;
}
and a fiddle: http://jsfiddle.net/qjSpj/1/

Answer 4

You can modify the <p> style from the default display to inline:
p {display: inline}

Answer 5

You can use the vertical-align: top; declaration on the li element. But you will need to use a clearfix since you're floating the image.

Answer 6

I just added vertical-align:middle/top/bottom; to the images and worked.