我想对齐图像中间的一些文字,我尝试了几种不同的垂直对齐方式,但似乎无法使其工作。垂直对齐文字与图像
目前,布局看起来如此:
及用于此的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>
你怎么想?你能否显示图片 –
你能否给我们提供一个链接? –
我刚刚在帖子的底部添加了一张图片,显示了我正在努力实现的目标。 –