質問: 画像横のテキストをセンターに配置したい html5, css3をベースに、添付画像(2)のような状態で作成したいなと思っております。 * ![#○○○○○](#) * ![#○○○○○○○○○○](#) * ![#○○○○○](#) htmlはこんな感じでシンプルに。 特に何もしなければ、 (1)のように画像のベースラインとテキストのベースラインが同じ位置に配置されます。 テキストが2行になると画像の下にずれ込みます。 しかし(2)のようにテキストをセンターに配置したいなと。 テキストは多くても2行でとどめるつもりなので、 1行でも2行でもセンターになるようにしたい。 ではと思ってまず思い浮かんだのが画像を「float: left」すること。 でもそうするとテキストがベースラインから回避できますが、 センターにはいかず、画像のトップと同じ位置に配置されます。 テキストが1行なら、反強制でpタグでくくって 「margin: top」で調整することもできるかと思いましたが、 2行分は設定したいのです。 ちなみに画像のサイズは指定しておりますが、 li自体には横幅の設定はしていますが高さ設定はしていません。 実質画像の高さが高さになることになります。 簡単にできることかと思っていたのですが、思いのほか苦戦しております。 ご存知の方いらっしゃいましたら、ご教授いただければ幸いです。 よろしくお願いいたします。
回答: img と span に長さ制限をかけて、両者の合計値が親をはみ出さない様にしてはどうでしょう。 少々自由度が落ちてしまうのが欠点ですが li { width:12em } li a > img { vertical-align:middle; max-width:4em; } li a > span { vertical-align:middle; max-width:8em; display:inline-block; } - ![]() 長い文字列