将文本与图像垂直对齐答案

【问题标题】：Vertically align text with image将文本与图像垂直对齐
【发布时间】：2012-12-09 03:20:10
【问题描述】：

我正在尝试对齐图像中间的一些文本，并且尝试了几种不同的垂直对齐方式，但似乎无法正常工作。

目前，布局看起来是这样的：

用于此的 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>

更新只是为了获得进一步的指导，我想让每个列表对象的文本显示如下：

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

【问题讨论】：

你想要什么？？你能显示图片吗
你能给我们一个链接吗？
我刚刚在帖子底部添加了一张图片，展示了我想要实现的目标。
请提供 HTML，而不是 php 代码。我们需要查看浏览器看到的内容，而不是服务器看到的内容。
@ChrisHerbert 我在帖子底部添加了 HTML 代码。 ul 的内容，包括 li、img、href、title 和 alt 标签都是从 $search_results 数组的 PHP foreach 动态生成的。

标签： html css image vertical-alignment

【解决方案1】：

从图像中移除浮动并使用垂直对齐：

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

http://jsfiddle.net/tNhyj/

【讨论】：

【解决方案2】：

您可以在图像中添加vertical-align:middle。

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

检查这个 jsfiddle 看看它是否是你想要的。 http://jsfiddle.net/3ETDj/

对我来说，它适用于 Firefox、IE8、Chrome 和 Opera。

【讨论】：

【解决方案3】：

如果图像总是相同的高度 + 描述长度总是相似的，你可以用 line-height 或/和 margin-top 来破解它，或者在图像上使用垂直对齐可以找到使用垂直对齐的示例这里：https://*.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;
}

【讨论】：