文字がどうやっても上揃えになってしまう

質問

xhtmlでサイト構築中なんですが、文字が上揃え状態から解除できずにもがいています。

ある部分にこのような要素を書いています。
---------------------------
<div id="a">あいうえお</div>
---------------------------

そしてそのCSSを下記のようにしてます。
---------------------------
#a {
width:150px;
margin:0px;
vertical-align:bottom;
padding:0px;
height: 50px;
background: url("img/bg.gif");
background-repeat: no-repeat;
background-position:0px 0px;
float: left;
}
---------------------------

これで添付の写真のように文字が最上部にしかなりません。
padding等で指定してもまったくなりません(ToT)

何かヒントでもいいのでアドバイスお願いしますm(_ _)m

回答No.3

salonpath

無駄って。。。
positionの使い方を確認してみてください。

お礼

回答ありがとうございます。

自力でなんとかIEも表示ができました。

>positionの使い方を確認してみてください。
やってみたけどこっちのほうが無駄でした(^^;)

回答No.2

askaaska

これはね、上揃えになっているわけじゃないの。
vertical-alignの意味を履き違えているのよ。

vertical-alignは領域の中で縦方向の位置を指定するためのものではなく
１行の中で縦方向の位置を示しているの。

Excelで例えれば、
<div id="a">の領域はA1～A3なのよ。
でも今文字「あいうえお」が入力されているのはA1のセルなわけ。　
セルの書式で縦方向を下に揃えたり中央に配置したりしても
A1のセルの中でのみ上下するだけで
A1～A3と言った広い範囲を上下するわけじゃないでしょ？

ためしにheightをline-heightに変えてみなさい。
領域aを１行と捕らえればちゃんとvertical-alignが働くのが判るはずよ。

ということで
・line-heightで指定する
　（Excelでいうならば行の高さを大きくする）
・divではなくtableタグでセルを作成する
　（vertical-alignは行だけじゃなく、セルにも使える）
・heightは小さくして、paddingで上下に余白を取る
こんなやり方があるわね。

お礼

回答ありがとうございます。

エクセルの意味はよ～く理解できました。
ですが他の部分がちょっと理解ができないというか、しっくり来ないというか・・

とりあえずいわれたとおりにやったんですが、safariとfirefoxではちゃんと表示されますが、IE６では下との間に隙間ができてしまい、NGでした。

これはIE6には適用できないのでしょうか？

回答No.1

salonpath

あいうえおをブロック要素で囲んで
positionでbottomに配置するとか

display:table-cell;
vertical-align:bottom;
を追加するとか（対応させたいブラウザの指定がないので）

お礼

回答ありがとうございます。

pで囲んでも無駄でした。
ありがとうございました。