私は次のものを持っています:
<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