Vertically aligning image and text on list items with CSS

Question

I am trying to vertically align an image on the left, and text on the right using the <li> to create two columns, like this:

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

space  space  space text1   space  space  space text1
space [image] space text2   space [image] space text2
space  space  space text3   space  space  space text3

Each image has a maximum of 100x100 pixels. They are different sizes. If the image is less than 100 by 100 it should align vertically and horizontally as shown above.

The issues:

1. Text will not go to the right of the image.
2. Image is aligned vertically but NOT horizontally.

It looks like this:

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

space   space space    space   space space 
[image] space space    [image] space space 
space   space space    space   space space
text1                  text1
text2                  text2
text3                  text3

The total width where these image and text falls in is 530 pixels so there is plenty of room. The code is as follows.

For those who don't know Coldfusion, the CFQUERY is simply a loop for the number of items returned from a database query:

.hcr ul {
  padding: 8px 5px;
  margin: 0;
}
.hcr li {
  margin: 0;
  padding: 0;
  float: left;
  width: 240px;
  padding: 10px;
  overflow: hidden;
  zoom: 1
}
.hcr .wrap {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #ddd
}
.hcr .image {
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 100px;
  vertical-align: middle;
}
.hcr img {
  float: left;
  display: inline;
  margin-right: 10px
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
    <a href="some.html"><img src="#image#" class="image"></a>
    </span>
        <a href="some.html">#text1#</a>
        <div>#text2#</div>
        <div>#text3#</div>
      </li>
    </cfoutput>
  </ul>
</div>

Any help is greatly appreciated. Thank you.

EDITED:

I resolved one of the issues for the text by wrapping the text portion with:

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

The image still will not center horizontally.

Answer 1

As in my edit, by wrapping the text portion with the following resolve one of the issues of text not moving to the right:

.hcr .wrap2 {
  width: 100px;
  height: 100px;
  display: table-cell;
}

<div class="hcr">
  <ul>
    <cfoutput query="querylist">
      <li>
        <span class="wrap">
       <a href="some.html"><img src="#image#" class="image"></a>
       </span>
       <span class="wrap2">  
       <a href="some.html">#text1#</a>
       <div>#text2#</div>
       <div>#text3#</div>
       </span> 
      </li>
    </cfoutput>
  </ul>
</div>

The second issue is resolved by removing the line float: left; from img

.hcr img {
  display: inline;
  margin-right: 10px
}

You can see it on fiddle It's not fully centered because of the 10px margin on the right for spacing between the image and the text.