リストを使って文字の上下行間を調整したい

[新着] Webテンプレートを仮オープンしました

0   名前： may ： 2006/06/14（水） 18:28  ID:tcNurPey
アイコン付きのメニューを横並びで作っています。
アクセントの画像の後にテキストでメニュー名、これの繰り返しで並ばせたいのですが、
テキストが画像に対して下位置になってしまうので、これを画像の縦幅の中間位置にしたいのです。
出来れば、リストタグを使って。フロートは使わない方向で。

ul {
margin: 0px;
}
li {
display: inline;
vertical-align: middle;
}

<ul><li><img src="img/aaa.gif" width="18" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li><img src="img/aaa.gif" width="11" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li><img src="img/aaa.gif" width="15" height="17" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li><img src="img/aaa.gif" width="16" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;</li></ul>


色々試行錯誤してみましたが、ピクリとも動いてくれません。
何かいい方法があれば教えてください。
1   名前： ????? ： 2006/06/14（水） 18:28  ID:Qn9HQ0p5
vertical-align: middle;は確かにインライン要素のプロパティですが、きいていないのでは？(よくわかりません)
ということで、りすとマークに利用する画像を背景に設定してみました。表示確認はしておりませんので…。<(_ _)>少し不安
----css
ul{margin: 0px;}
li{
display: inline;
list-style-type:none;
padding-left:20px;
}
/*背景画像のセンター左寄せ*/
#item1{background:url(img/◆.gif) no-repeat center left;}
#item2{background:url(img/▼.gif) no-repeat center left;}
#item3{background:url(img/★.gif) no-repeat center left;}
#item4{background:url(img/●.gif) no-repeat center left;}
----html
<ul>
<li id="item1"><img src="img/◆.gif" width="18" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li id="item2"><img src="img/▼.gif" width="11" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li id="item3"><img src="img/★.gif" width="15" height="17" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;&nbsp;</li>
<li id="item4"><img src="img/●.gif" width="16" height="15" border="0" alt="あああ">&nbsp;&nbsp;<a href="#">あああ</a>&nbsp;</li>
</ul>
2   名前： ????? ： 2006/06/14（水） 18:28  ID:Qn9HQ0p5
少し説明不足でした、
padding-left:20px;
は、お解りと思いますが、背景画像のスペースを空けています、画像サイズがそれぞれ異なるので広くとりました。
3   名前： may ： 2006/06/14（水） 18:28  ID:tcNurPey
背景も試したのですが、画像が出ないんですよ。
出るはずだとは思うのですが…。(謎)
画像の中心は無理なんでしょうか…？
4   名前： カヅサツ ◆ThCi95HEzw ： 2006/06/14（水） 18:28  ［URL］  ID:O5hEMlpW
該当のページのURLがわかれば、検証できるかもしれません
5   名前： may ： 2006/06/14（水） 18:28  ［URL］  ID:tcNurPey
まだちゃんとしたとこがないので、仮ですがUPしました。
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/06/14（水） 18:28  ［URL］  ID:O5hEMlpW
▼画像の高さの問題
vertical-alignは、li要素でなく、img要素に指定してください。

▼画像が表示されない問題
http://feikufa.fool.jp/test.html に <img src="img/wagon.gif" (略)> と書かれているということは、http://feikufa.fool.jp/img/wagon.gif を表示しようとしているわけですが、どうも存在しないみたいです。

別の画像、例えば http://feikufa.fool.jp/img/menu_5.gif はちゃんと存在するみたいですから、同じように put (アップロード)してください。

▼蛇足
・font-familyはなるべくなら指定しない方が良いのですが、指定する場合は総称ファミリを最後に指定しましょう。
・line-height は単位を付けず、倍数の方が無難です。
・&nbsp; で余白の調節をせず、marginやpaddingを使いましょう。

#header1 {
	width: 725px;
	height: 17px;
	padding-top: 5px;
	padding-bottom: 3px;
	padding-right: 5px;
	text-align: right;
	font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka", sans-serif;
	font-size: 11px;
	line-height: 1.7;
}
#header1 ul {
	margin: 0px;
}
#header1 li {
	display: inline;
	list-style-type: none;
	padding-left: 0.5em;
}
#header1 img {
	vertical-align: middle;
	margin-right: 0.5em;
	border-width: 0px;
}

<div id="header1">
<ul>
	<li><img src="img/wagon.gif" width="18" height="15" alt="aaaa"><a href="#">ああああ</a></li>
	<li><img src="img/beginner.gif" width="11" height="15" alt="aaaa"><a href="#">ああああ</a></li>
	<li><img src="img/help.gif" width="15" height="17" alt="aaaa"><a href="#">ああああ</a></li>
	<li><img src="img/mail.gif" width="16" height="15" alt="aaaa"><a href="#">ああああ</a>&nbsp;</li>
</ul>
</div>

7   名前： may ： 2006/06/14（水） 18:28  ID:tcNurPey
参考にしつつ、微調整したら出来ました！
ありがとうございます。

ソースが判ればいいと思ったんで、画像はUPしませんでした。スイマセン。(汗)
一覧へ戻る