【span,vertical-alignの動作】

質問

Webサイトのヘッダー部分によくある横並びのボタンを画像で用意しようと思うのですが、左端の画像はボタンより縦に大きいサイズのロゴを入れたいのです。

すると、横に並ぶボタンはロゴの底部に揃って並びますが、これらのボタンを指定のピクセル上に移動させて表示したいと考えています。これはvertical-align: middle;ではなく、任意の数値で動かしたいです。
また、ロゴは左端のままで、ボタン画像はセンタリングさせたいとも考えています。そこで、

<span class="head"><a href="x"><img src="y"></a><a href="x2"><img src="y2"></a><a href="x3"><img src="y3"></a></span>

<style type="text/css">

.head {
text-align:center;
}

</style>

ひとまず自分で調べつつ上記のように書いてみましたが、Web上ではセンタリングしてくれません。教えて頂きたい要点としては、

1.任意のpx数を指定して横並びの画像を上下揃えする方法
2.一行内の部分的なセンタリングにおける上記構文の誤りのご指摘

になります。なにぶん素人ですので、気づいていないこともあるかと思います。
どうぞお願いします。

回答No.2

noname#206842

<span class="head"><a href="x"><img src="y"></a><a href="x2"><img src="y2"></a><a href="x3"><img src="y3"></a></span>
の部分の記述がおかしいのでは？・・・
HTMLでの記述？・・・
<nav>
<ul>
<li><a href="x"><img src="y"></a></li>
<li><a href="x2"><img src="y2"></a></li>
</ul>
</nav>

CSSで、
ul li{display:inline; padding-left:10px; text-align:center;}

HTML5での記述を書いていますが、それ以前の場合は、<nav>がないので、
<div class="header">
<div class="nav">
<li><a href="x"><img src="y"></a></li>
<li><a href="x2"><img src="y2"></a></li>
</div>
</div>

と、いうようになるのでは？・・・

回答No.1

askaaska

１．
position :relative;
top: -30px;
こんなことをしてみるといいわ

２．
spanに
border : solid 1px blue;
とかしてみると原因が見えると思うわよ
span内ではセンタリングされているはず

display:block;やdisplay:table;とwidthを使って
spanに幅を指定してあげればいいわ