フロートされた親要素(既知のサイズ)の内側に任意のサイズの子要素を垂直方向に中央揃えするにはどうすればよいですか?
display: table-cell; vertical-align: middle;
要素がフロートしている場合は機能しなくなったようです。
ここでSSCCEを作成しました:http://mathiasbynens.be/demo/center-vertically-inside-float
フロートがないと、すべてが正常に機能します。ただし、親要素がフロートされるとすぐに、垂直方向の配置は失敗します。
これを回避する方法はありますか?
編集:子要素は画像であることになっていることを追加する必要があります。私の例のページでは、段落を使用しています。これは、それらのp
要素に必要なCSSを要素img
にも適用できると想定したためdisplay: block;
です。(失敗。)