- ベストアンサー
list-style-iamgeの画像表示位置
list-style-iamgeを使って、 リスト表示していますが、 画像表示位置が FireFoxでは下端 IEでは中央になってしまいます。 list-style-には位置情報を設定するプロパティはないので、 どのように 画像-文字 の位置を中央にセットするのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
リスト画像自体は動かせないので、文字のほうを動かしてやります。 ただし、liの文字はspan等の要素で囲ってやる必要があります。 <style> #sample li { list-style:url(rrr.jpg) inside; height:346px; line-height:346px; background:#ddd; vertical-align:top; } :root #sample span { vertical-align:top; } </style> <ul id="sample"> <li><span>ddddd</span></li> </ul> IE6~7、Firefox2~3、Opera9、Safari3で動作確認しましたが、このあたりの動作はかなり微妙なようなので、適宜確認しながらの作業が必要になると思います。
その他の回答 (3)
連投すみません。 必要内部分があったので、修正ました。 <style> #sample li { list-style:url(image.jpg) inside; height:100px; line-height:100px; vertical-align:top; } :root #sample span { vertical-align:top; } </style> <ul id="sample"> <li><span>ddddd</span></li> </ul>
list-style-imageはなぜか、どうやっても上手くいかなかった気がします。 そのため私は、liの背景に画像を左寄せに設定し、文字はpadding-leftで位置調整をしています。 ↓こんな感じです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> *{ margin:0; padding:0; } li{ margin-top:10px; list-style-type:none; background:url(test.jpg) no-repeat center left; margin-left:30px; padding-left:20px; } </style> </head> <body> <ul><li>ああああああ</li></ul> </body> </html>
- SAYKA
- ベストアンサー率34% (944/2776)
vertical-alignでは・・・？
