Vertically align text with image

Question

I am trying to align some text in the middle of an image, and I've tried a few different ways of vertical-align, but I can't seem to get it to work.

Currently, layout looks so: Current layout

and the HTML/CSS used for this is:

<p id="searchresults">Search Results</p>
 <ul id="posted_results">
 <?php
 foreach($search_result['movies'] as $sr){
 echo '<li class="search_item"><a href="/ug10/cs10aer/screening/movie.php?title=' . $sr['title'] . '" alt="' . $sr['title'] . ' (' . $sr['year'] . ')"><img src="' . $sr['posters']['thumbnail'] . '" title="' . $sr['title'] . ' poster" alt="' . $sr['title'] . ' poster" /></a><a href="/ug10/cs10aer/screening/movie.php?title=' . $sr['title'] . '" alt="' . $sr['title'] . ' (' . $sr['year'] . ')">' . $sr['title'] . ' (' . $sr['year'] . ')</a></li>';
 }
 ?>
 </ul>

Current CSS

UPDATE Just for further guidance, I'm wanting to get the text for each list object to display thus: Wanted layout

UPDATE 2 As requested, here's the HTML code as seen by Firefox:

<div id="content">
 <p id="searchresults">Search Results</p>
 <ul id="posted_results">
 <li class="search_item"><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode III - Revenge of the Sith 3D" alt="Star Wars: Episode III - Revenge of the Sith 3D (2005)"><img src="http://content8.flixster.com/movie/10/94/47/10944718_mob.jpg" title="Star Wars: Episode III - Revenge of the Sith 3D poster" alt="Star Wars: Episode III - Revenge of the Sith 3D poster" /></a><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode III - Revenge of the Sith 3D" alt="Star Wars: Episode III - Revenge of the Sith 3D (2005)">Star Wars: Episode III - Revenge of the Sith 3D (2005)</a></li>
 <li class="search_item"><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode II - Attack of the Clones 3D" alt="Star Wars: Episode II - Attack of the Clones 3D (2002)"><img src="http://content7.flixster.com/movie/10/94/47/10944721_mob.jpg" title="Star Wars: Episode II - Attack of the Clones 3D poster" alt="Star Wars: Episode II - Attack of the Clones 3D poster" /></a><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode II - Attack of the Clones 3D" alt="Star Wars: Episode II - Attack of the Clones 3D (2002)">Star Wars: Episode II - Attack of the Clones 3D (2002)</a></li>
 <li class="search_item"><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode IV - A New Hope" alt="Star Wars: Episode IV - A New Hope (1977)"><img src="http://content9.flixster.com/movie/10/94/47/10944715_mob.jpg" title="Star Wars: Episode IV - A New Hope poster" alt="Star Wars: Episode IV - A New Hope poster" /></a><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode IV - A New Hope" alt="Star Wars: Episode IV - A New Hope (1977)">Star Wars: Episode IV - A New Hope (1977)</a></li>
 <li class="search_item"><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode VI - Return of the Jedi" alt="Star Wars: Episode VI - Return of the Jedi (1983)"><img src="http://content7.flixster.com/movie/10/94/47/10944709_mob.jpg" title="Star Wars: Episode VI - Return of the Jedi poster" alt="Star Wars: Episode VI - Return of the Jedi poster" /></a><a href="/ug10/cs10aer/screening/movie.php?title=Star Wars: Episode VI - Return of the Jedi" alt="Star Wars: Episode VI - Return of the Jedi (1983)">Star Wars: Episode VI - Return of the Jedi (1983)</a></li>
 </ul>
 </div>

• NullPoiиteя: how you want ?? could you show image
• David Passmore: could you provide us with a link?
• Alex Ryans: I've just added an image at the bottom of the post showing what I'm trying to achieve.
• Chris Herbert: Please provide the HTML, not the php code. We need to see what the browser sees, not what the server sees.
• Alex Ryans: @ChrisHerbert I've added the HTML code at the bottom of the post. The contents of the ul, including the li, img, href, title and alt tags are all being generated dynamically from the PHP foreach from $search_results array.

Answer 1

Remove the float from the image and use vertical-align:

.search_item img {
 vertical-align: middle; 
 margin-right: 30px;
}

http://jsfiddle.net/tNhyj/

Answer 2

You may add vertical-align:middle to the image.

li img {
 vertical-align:middle;
padding-right:10px; 
}

Check this jsfiddle to see if it is what you want. http://jsfiddle.net/3ETDj/

For me it is working in Firefox, IE8, Chrome and Opera.

Answer 3

if the image is always the same height + descriptions lenght is always gonna be similar, you could hack it with line-height or/and margin-top, or using vertical-align on image eample using vertical-align can be found here: https://stackoverflow.com/a/13780959/1134615

simple fiddle using line height:

http://jsfiddle.net/BrFga/

html

 <ul>
 <li>
 <img src=""/> 
 <p>Sample text</p>
 </li>
 </ul>​

css

ul {
 height: 120px;
 width: 600px;
 outline: red 1px solid; 
}
img {
 height: 120px;
 width: 120px;
 float: left;
}
p {
 height: 120px;
 line-height: 120px;
}

​