2

フロートされた親要素(既知のサイズ)の内側に任意のサイズの子要素を垂直方向に中央揃えするにはどうすればよいですか?

display: table-cell; vertical-align: middle;要素がフロートしている場合は機能しなくなったようです。

ここでSSCCEを作成しました:http://mathiasbynens.be/demo/center-vertically-inside-float

フロートがないと、すべてが正常に機能します。ただし、親要素がフロートされるとすぐに、垂直方向の配置は失敗します。

これを回避する方法はありますか?

編集:子要素は画像であることになっていることを追加する必要があります。私の例のページでは、段落を使用しています。これは、それらのp要素に必要なCSSを要素imgにも適用できると想定したためdisplay: block;です。(失敗。)

4

3 に答える 3

3

ワンライナーの場合は、コンテナの高さに設定しますline-heightp

于 2009-12-31T13:51:33.443 に答える
1

さて、 porneL's answer のおかげで、問題の解決策が見つかりました。

私のSSCCEでは、段落を子要素として使用しました(そして、porneLはそれに関する限り正しい答えを出しました)が、本当に必要なのはimagesでした。これには、追加の CSS が少し必要であることがわかります。

div { width: 780px; height: 200px; vertical-align: middle; text-align: center; float: left; }
 div img { vertical-align: middle; }

助けてくれてありがとう、みんな!

于 2009-12-31T14:29:45.457 に答える
1

フロートは、セルをフロートできないため、テーブルセルを無効にします。したがって、基本的には標準的なものをお勧めします – フローティング シム テクニックまたは絶対配置を使用します。

于 2009-12-31T13:29:11.827 に答える