画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応)

こんにちは、鴨田です。 何らかの要素が縦横中央揃えになっているデザインが結構な頻度で出てきます。 デザイナーとしては見栄えを考えてそうしているのですが、 コーダーとしては、横方向はまだしも縦方向の中央揃えは何かと面倒だったりします。 いくつかケースがあると思うので、それぞれに関して自分ならこうする、 というコーディングをしていきたいと思います。 とある要素の中で画像だけを縦横中央揃えしたい、というケースもあると思いますが、 今回は画像があってその横に来るテキストを縦方向に中央揃えしなければならない、 というデザインに特化した説明をします。 また、画像の横幅は決まっているけど、テキスト部分の横幅が可変となっていて、 かつ、画像とテキストを内包するリンクは縦横いっぱいにリンクエリアが確保されている というリキッドレイアウトとします。 ０．元となるHTML HTML <div class="wr

[jyunokko]

vertical-align以外で画像とテキストを横にそろえる

[oppo240]

“box-align: center”

[nayo74]

画像とテキストを中央揃えにしたいときのＣＳＳ設定。

[oppara]

画像付きリストのテキストを縦方向に中央揃えする(リキッドレイアウト対応) : アシアルブログ