0

水平ナビゲーション メニューに次の項目があります。

<li class="menu">
   <a href="---">Our Users</a>
</li>

次のように表示したい：

スクリーンショット

テキストの色などを考えます。知りたいのは、画像をテキストの上に表示し、テキストをその下の中央に配置する方法です。

何かアドバイス？

4

2 に答える 2

1

Li の背景をその 2 人のアイコンに設定し、li にパディングトップを与えるのは簡単です。

li { background: url(image.png) no-repeat; 
     padding: 40px 0 0 0; 
     text-align: center;
   }
于 2013-01-14T05:49:35.533 に答える
1

これを試して。画像がクリック可能ではないと仮定すると...幅とパディングをliタグに適用します。

li { background: url(urimage.png) no-repeat; 
 padding: 72px 0 0 0; 
 text-align: center;
 width: 100px;
 list-style: none;

}

画像をクリック可能にしたい場合は、「our users」というテキストを div で囲み、上記と同じスタイルを適用します。

このjsfiddleデモを試してください

それがあなたを助けることを願っています。ありがとうございました

于 2013-01-14T06:17:52.250 に答える