0

私が見つけたdisplay:table-cellの使用は、物事を垂直方向の中央に配置するための便利な方法です。特に、静的なピクセルサイズが機能しないRWDコンテキストではそうです。フロートを使用せずに、ロゴimgといくつかのテキストを互いに垂直方向に中央揃えにしようとしています。

ここを参照してください:http: //dabblet.com/gist/5249192

Chromeでは、期待どおりに機能します。ブラウザのサイズが小さくなると、imgが小さくなり、テキストが折り返されます。ただし、FF、IE 9、およびOperaでは、画像は縮小されません。実際、幅と高さの宣言はすべて無視されているようです。

それを修正するために現在のHTML/CSSに変更を加えることができますか、それともChromeが現在のレイアウトをサポートしているという事実は幸せな間違いであり、これはすべて間違っていますか?

ありがとう!

4

2 に答える 2

0

愚かな私、私はちょうどそれを理解しました。

Max-widthはブロックレベルの要素にのみ適用されるため、img {max-width:100%;}宣言は機能しません。これにより、画像の幅が滑らかになりません。imgをターゲットにして幅を100%にすることで、この問題を解決しました。ブーム!

于 2013-03-26T21:27:35.343 に答える
0

display:table-celldisplay:table-row対応する要素なしでdisplay:table、親要素で使用することを意図したものではありません。

あなたはそれを持っていません、そしてあなたは明らかにそれをテーブルセルとして使おうとはしていません。コンテンツを中央に配置するためにそれを使用することである程度の成功を収めたかもしれませんが、それはそれが設計されたものではないので、すべてのブラウザーで機能しないことは実際には驚きではありません。

これを本当に使用table-cellしたいのに、目的の機能が実行されない場合は、親要素にスタイルを追加してみてくださいtable-rowtable既存のスタイルに影響を与えるため、追加のマークアップが必要になる場合があります)。あなたがそれらを着ればwrapperそしてheader)。

于 2013-03-26T21:30:51.090 に答える