こんな感じでテキストが上にいっちゃう場合、どこを設定したらいいのか迷う事があるようです。
複雑な作りになっている程、どこをいじればいいのか分からなくなります。(私も迷いました)
ちなみに、以下はリスト「li」とリストの中のリンク「li a」にCSSの設定をしています。
まず、「li」でwidthとmarginとfloatを設定します。
次に
「li a」で、heightとpadding-topを設定します。
そうしたら文字はちゃんと真ん中に来ます。
文字を真ん中に設定したいとき、text-alignは「center」でド真ん中に来てくれるんですが、垂直位置の真ん中に関しては、valignを「middle」にしてもダメなのです。
この辺で迷いが出てきて、そろそろ先生を呼ぼうかな、という気持ちになってきます。
この時に、paddingを設定したら、heightはpadding分の数値を引きます。
例えばheight:40、padding:0の設定から、paddingを10に変更した場合、heightは30にしましょうという訳です。
比較的シンプルなサイトの場合、たいして困ることはないのですが、複雑に絡み合ったサイトだと、あれこれ触ってみないとどうしようもないことも多いです。
「ここを変更したらうまくいくはず・・・・あれ~?ダメですね じゃあこうしてみましょうか・・・」というパターンも多いです。
もちろん、私が未熟だからってのもありますが・・・。