0

画像の中央にテキストを配置しようとしています。垂直方向に配置する方法をいくつか試しましたが、うまくいかないようです。

現在、レイアウトは次のようになっています。 現在のレイアウト

これに使用される 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>

現在の CSS

更新 さらなるガイダンスのために、各リストオブジェクトのテキストを次のように表示したいと考えています: 希望レイアウト

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

3 に答える 3

1

画像からフロートを削除し、vertical-align を使用します。

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

http://jsfiddle.net/tNhyj/

于 2012-12-08T19:17:51.620 に答える
0

画像に vertical-align:middle を追加できます。

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

このjsfiddleをチェックして、それがあなたが望むものかどうかを確認してください。 http://jsfiddle.net/3ETDj/

私にとっては、Firefox、IE8、Chrome、Opera で動作しています。

于 2012-12-08T19:17:01.303 に答える
0

画像が常に同じ高さ + 説明の長さが常に同じである場合は、line-height や margin-top でハックするか、vertical-align を使用して画像サンプルで vertical-align を使用することができます: 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;
}

</p>

于 2012-12-08T19:01:33.607 に答える