htmlで縦の中央揃えが上手くいきません。

質問

htmlで縦の中央揃えが上手くいきません。

vertical-align : middleでいけると思われるのですが、上手くいきません。

下記の部分です。

<div style="vertical-align : middle;">
<a href="http://www.yahoo.co.jp/"><img src="logo.png" /></a>
&gt;
<a href="http://okwave.jp">okwave</a>
&gt; thispage
</div>

何か間違えているでしょうか？
それとも、テキスト以外は揃わないのでしょうか？

回答No.3

DrFell

vertical-alignの適用対象は、行内レベル要素及び'table-cell'要素 であること。
divはブロックレベル要素ですので、あてはまりません。

行内レベル要素（インライン要素）はおっしゃあるようにテキストの感覚ですね。a要素もimg要素も行内レベル要素です。他にstrongも行内レベルです。imgはブロックーインライン要素というブロックレベル要素とインライン要素を併せ持つ要素になります。行の中に改行せずに入ります。

divや見出し、テーブルや箇条書きなどはブロックレベル要素です。ブロック要素は行の中に入れません。要素の前後に改行が入ります。ブロック要素は高さや幅を持てますし、paddingやmarginもおおむね思っておられるように作動します。が、インライン要素は、高さや幅を持てません。paddingやmarginも思っておられるようには作用しない筈です。

性格がまるで違うのです。このあたりは、ｃｓｓでデザインする場合基本ですのでしっかり調べて把握してください。ちゃんとした初心者教習本なら必ず説明がある項目ですので、初歩から学び直しされることをお勧めします。

で、vertical-alignをdivに効かせようとする場合には「行内レベル要素及び'table-cell'要素 」である必要があります。なので、table-cell要素にすれば、いいんですよ。display:table-cellなんてね。これだけでは効かないのですが、そのへんはwebuser さんがお調べください。

ｃｓｓの仕様書の邦訳のページをご紹介しますね。
http://www.y-adagio.com/public/standards/tr_css2/visudet.html#propdef-vertical-align
http://www.y-adagio.com/public/standards/tr_css2/visuren.html#propdef-display

回答No.2

sanzero

下記、参考にどうぞ
http://c-brains.jp/blog/wsg/11/10/13-200523.php

※提示されたdivは高さが内容分しかないんじゃないでしょうか？

回答No.1

Taiyonoshizuku

vertical-alignが使えるのはインライン要素とテーブルセルのみ～