垂直對齊文字與圖像

Question

我想對齊圖像中間的一些文字，我嘗試了幾種不同的垂直對齊方式，但似乎無法使其工作。

目前，佈局看起來如此：

及用於此的HTML/CSS是：

<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> 

UPDATE 只是爲了進一步的指導，我想要獲取每個列表對象的文本以便顯示：

更新2 按照要求，這裏的Firefox瀏覽器所看到的HTML代碼：

<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> 

Answer 1

如果圖像總是相同的高度+描述lenght始終會是相似的，你可以有本事行高或/和上邊距，或使用垂直對準圖像eample使用垂直對齊可以在這裏找到：https://stackoverflow.com/a/13780959/1134615

簡單撥弄使用線高度：

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; 
} 

Answer 2

您可以添加垂直對齊：中間的形象。

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

檢查此jsfiddle，看看它是你想要的。 http://jsfiddle.net/3ETDj/

對我來說，它是在Firefox，IE8，Chrome和Opera工作。

Answer 3

刪除圖片的浮動和使用垂直對齊：

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

http://jsfiddle.net/tNhyj/