こんな感じになってしまう。
これが正解。
こんな感じに。
table-cellなんかでもvertical-alignは効きます。
まあtable属性の親をつけないとブラウザによって変な挙動が起きるかもしれないですがね。
こんな感じに。
ま、cssなんてもんは何度も書けばだいたい同じパターンに遭遇するので、同じような悩みを何度も抱えないようにしましょー。
そして一つのやり方にこだわらず、色々なやり方があると知っておくとデザイナーの欲求にも答えられるようになりますよ。
以前うまくいかず、あれー？あれー？と悩んでいた問題。
画像があって、その横にテキストがある。
んでそのテキストは画像の縦中央に配置する。
なぜかvertical-alignが効かないよ、と悩んでしまって。
これ、テキストにvertical-alignをつけても駄目なのですよ。
こんな感じになってしまう。
まあこのwordpressテーマだとデフォルトで中央揃えになるみたいですが。
で、これを中央揃えにするにはテキストにvertical-alignをつけるのではなく、画像にvertical-align: middleを設定しないといけないのです。
これが正解。
個人的にはテキストを画像の中央に並べる、と言う意味でテキスト側につけたくなるのですが、インライン要素である画像側に設定しないといけないってのは盲点かも。
ちなみにボタンとかの中央配置でvertical-alignやってもやっぱ意味ない。これが有効なのはtableとかflexboxとか一部のdisplay設定だけなのです。
ブロック要素にはつけられないので上下パディングつけるなりで対応しましょ。
こんな感じになってしまう。
これが正解。