tableタグを使った時に中身の位置が変！
あれ、これどうやって直すんだっけ？？？って時用のメモです。
上下の位置変更には「vertical-align」
上下位置と言えばこの子！「vertical-align」です！
| baseline | ベースラインを揃えてくれる |
| top | 上寄り |
| middle | 中央寄り |
| bottom | 下寄り |
| text-top | テキストの上寄り |
など
位置調整はしょっちゅう出てくる問題ですが、「vertical-align」って大抵効かないってイメージがあったのでむしろ除外するところだった。
役に立つこともあるんだなー。
「vertical-align」が効かないんだけど…そんな時は？
私の中で役立たずの印象が激つよな「vertical-align」さん。
効かない時はそもそも以下のような原因もあるそう。
- ブロック要素には効かない。インラインしか受け付けません！
- floatが効いてるとこにも無効です。
- きちんとその子にかかってる？親要素だと効き目なし。
ただ、tableだと関係ないかな。
tdの場合は、高さが指定していないと効かないらしい。
あとdivとかで効かない場合は「display: table-cell;」をつけてやるとtable擬きになるので効くとか何とか。
他にもpotisionなどを使って何とかする手もあるそうだけど…これも苦手！
とりあえず今回はここまで。