Vertical align of a container div inside unordered list element

Question

I've tried multiple solutions found here, but for some reason these solutions didn't work for me.

Based on Vertical align span inside div:

You can see a test version here: http://sint-lucia.sintelisabeth.be/testva.php

All I want is the text on the left (dynamic height) to be vertical aligned with the height of the photograph.

I tried with line height=height of photo, no luck (text started on 50% height of photo but the space between the lines was the height of the li element)

This is my CSS:

body {
     background: #000; font-family: Verdana, Arial, sans-serif;
}

img {
     width: 65%;
}

ul li {
     display: table;
     vertical-align: middle;
     margin-bottom: 20px;
}

h1 {
     font-size: 24px;
}

p {
     font-size: 18px;
}

.container {
     width: 1024px;
     margin-left: auto;
     margin-right: auto;
     background: #fff;
     padding: 30px;
}

.slide-desc {
     float: left;
     width: 35%;
     text-align: center;    
     display: table-cell;
     vertical-align: middle;
}

Answer 1

Just do this for both elements: - the container with the description + the image

html {
    font-size:1em;
}
img {
    width:auto;
    max-width:100%;
    height:auto;
}
ul {
  list-style:none;
  padding:0;
}
/*  Fix to remove white space in inline-block elements */
ul li {
  font-size:0;
}
ul li > div {
  font-size:16px;
}
.slide-desc {
   width:35%;
   text-align:center;
 }
.image-container {
    width:65%;
    text-align:right;
}
.slide-desc,
.image-container {
   display:inline-block;
   vertical-align:middle;
}

http://jsfiddle.net/FeAHJ/21/
http://jsfiddle.net/FeAHJ/21/show

Answer 2

Remove the float for for .slide-desc and also the img tag has a width of 65%, change this to 100%. Add this to your style sheet.

.slide-desc{
    float:none; //Add this line
    float: none !important; // add this line if the float left is added to this element by some script
}

img{
    width:65% // change this to below
    max-width:100%; //this will set max-width 100% for all the img tags in you site.
}

If you don't wan't to target all the img tags to have 100% width, please target the img by adding the containing div class name. I couldn't find a class name for the containing div in your test page page and that why i targeted with just img tag.