0

私のテキストには 1 行しかなく、写真はコンテナの高さに収まります。
テキストと画像を垂直方向に中央揃えにしたい。
負の値と相対的な位置でマージントップテキストクラスを試してみましたが、本当に欲しいものは何もありません。

jsfriddleはこちら

HTML

<div id="friend_select">
        <div class="Friend">
            <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
            <span class="Name">First Name Last Name 1</span>
        </div>
        <div class="Friend">
            <img class="Picture" src="http://graph.facebook.com/harell/picture?type=square&width=80&height=80" />
            <span class="Name">First Name Last Name 2</span>
        </div>
</div>

CSS

#friend_select{ padding: 5px; width: 400px; height: 500px; }
.Friend{ height: 80px; } 
.Friend .Name{ line-height: 80px; }
.Friend .Picture{ line-height: 80px; width: 80px; height: 80px; }

</p>

4

1 に答える 1

2

この修正を提案します：

.Friend .Name{ line-height: 80px; vertical-align:top; }

ライブデモはこちら: http://jsfiddle.net/keaukraine/WNT7U/

最新の Firefox、Chrome、および IE から IE8 までで動作します。IE7 の場合、次のハックを適用します。

.Friend .Name { *zoom:1; }
于 2012-12-25T08:27:40.203 に答える