0

このようなことを達成するための最良の方法は何でしょうが、アイコンがテキストの中央 (可変長) に垂直に配置されている場所はどこですか?

http://i.imgur.com/OcGLUoG.png

アイコンは CSS スプライトで、アイコンまたは関連テキストにカーソルを合わせると背景が 26 ピクセル以上移動します

4

2 に答える 2

3

CSS スプライトと互換性のある新しい回答

@Octavian のフィードバックに応えて、CSS スプライトの使用を許可する問題に対処する別の方法を次に示します。ここでの解決策はdisplay:table、liとdisplay:table-cellその子を垂直方向に揃えるために使用することです。次に、画像の代わりに、スプライトに を含むプレースホルダーdivをbackground-image使用できます。ここに jsFiddle があり、コードは以下のとおりです。

CSS

ul {padding-left:0;}

li {display:table;margin-bottom:20px;}

.image-holder {
    display:table-cell;
    width:26px;
    height:26px;
    vertical-align:middle;
    background-image:url('http://placehold.it/52x26');
    background-repeat:no-repeat;
    background-position:left center;
}

li:hover .image-holder {background-position:right center;}

.text {padding-left:30px;display:table-cell;}

HTML

<ul>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">www.website.com</span>
    </li>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">742 Evergreen Terrace<br/>Springfield, SP 12345<br/>United States</span>
    </li>
    <li>
        <div class="image-holder"></div>
        <span class="text" style="display:table-cell;">T) (800) 555-5555<br/>F) (800) 666-6666</span>
    </li>
</ul>

古い答え、よりエレガントですが、スプライトと互換性がありません

もう 1 つのオプションは、各画像をbackground-image各 の上部中央に配置して使用することliです。ここでの CSS の重要な部分はbackground-positionで、最初の引数は水平方向の配置 (topこの場合) を表し、2 番目の引数は垂直方向の配置 (centerこの場合) を示します。 ドキュメンテーションはこちら。ここにjsFiddleがあり、コードは以下のとおりです。

CSS

li {
    background-position:left center;
    background-repeat:no-repeat;
    padding-left:40px;
    padding:5px 0 5px 60px;
    margin-bottom:20px;
    list-style-type:none;
    background-image:url('http://placehold.it/30x30');
}

HTML

<ul>
    <li id="website">www.website.com</li>
    <li id="address">742 Evergreen Terrace<br/>Springfield, SP 12345</li>
    <li id="phone">T) (800) 555-5555<br/>F) (800) 666-6666</li>
    <li id="email">info@website.com</li>
    <li id="share">Share via email</li>
</ul>

編集 1 @cimmanon のコメント (ありがとう!) に応えて、サンプルはテキストよりも大きな画像で動作するようになりました。付随するデモを投稿しました。

編集 2上揃えではなく中揃えの必要性を示す @Octavian のコメントに沿って変更されました。

Edit 3 CSSスプライトと互換性のある新しい回答

于 2013-06-05T18:15:44.077 に答える