1

私は次のものを持っています：

<li>
<a class="dw"><span>Design Goals</span></a>
</li>

.dw {
   background-image: url(/Content/images/icons/fugue/document-globe.png);
}

私のブラウザで見ると、このようなものが表示されます

iii
iii  xxxxxxxxxxxxxxx
iii  xxxxxxxxxxxxxxx

ここで、iは画像を表し、xは「デザイン目標」というテキストを表します。

背景画像を押し下げたり、テキストを押し上げたりして、それらをさらに整列させる方法はありますか？スパンにパディングとマージンを追加しようとしましたが、うまくいかないようです。行の高さのさまざまな組み合わせも試しましたが、それも機能しません。

私が試したのは：background-position：centerですが、次のようになります。

             iii
       xxxxxxiiixxxxxx
       xxxxxxxxxxxxxxx
4

3 に答える 3

2

を使用しbackground-positionます。

例えば：

background-position: center 100px;
于 2013-01-03T09:40:32.173 に答える
0

スパンのデフォルトの表示プロパティはインラインであり、divの表示プロパティはブロックであるため、スパンの代わりにDivを使用します。テキストをプッシュアップする場合は、最初にスパンタグを付けます。

HTML

<li>
<span>Design Goals</span>
<div  class="dw" ><img src='http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg'><div>
</li>

css

.dw {
height: 100px;
width: 200px;
}

デモを見る

ここでは、画像を分割して、テキストの下に表示されるようにします。または、スパン表示プロパティをブロックとして使用して、テキストと画像を最初の参照として取得します。

于 2013-01-03T09:49:45.650 に答える
0

スタイルをリスト要素に適用します。

li {
    background-image: url(http://wpcdn.padgadget.com/wp-content/uploads/2010/08/alphabet.jpg);
}

<li><a href="#">Design Goals</a></li>
于 2013-01-03T10:15:56.823 に答える