POPUP divをDYNAMICの高さに垂直に配置する方法は？

うわー、このような旋風になるとは思わなかった。 My pageには、データベース生成コンテンツが埋め込まれた複数のdivポップアップがあり、各divは動的な高さを持ちます。簡単な言葉で言えば、ページの真ん中にある必要があり、コンテンツは常に中央にある必要があるため、中心から上下に拡張してください。なぜ:(このとても困難ですPOPUP divをDYNAMICの高さに垂直に配置する方法は？

出典

2011-01-17 Earl Larson

私はわからないんだけど、私はそれぞれのdivの上部と下部の余白に設定だと思います'auto'はそれらを中心に置くかもしれない。あなたが持っている滑らかな効果について私は知らない。 –

私はエフェクトを編集します。それにかかわらず、それを中心にするが、それはそれを垂直に整列させないだろう。 divの中心は常にページの中央にある必要があります。そのため、生成される内容に応じて、高さを上下に拡張する必要があります。 –

マージン：？。自動車、コンテナのdivの高さを言及行う

出典

2011-01-17 09:19:27 hungryMind

マージン：自動は、静的に大きさのある要素のセンタリングにのみ機能します。 –

マージン：autoは水平に配置され、dynamicはdivに設定された高さがないことを意味します。 –

ああ、私はあなたを理解していない。コンテナdivはページ/スクリーン全体に中央に配置する必要があるため、コンテナdivはありません。 –

あなたはブラウザの互換性を要求する場合は特に、これは多かれ少なかれ不可能プレーンHTML/CSSであるI外来のtable要素を使用してコンテンツを格納すると、vertical-alignのCSSプロパティの表が技術的に適格であるため、ブラウザー間で運が良かったです（実際には表形式ではないdivのようなものを取ってください）table + tdコンボは、基本的にはdivのように振る舞います。彼らは正しく整列しています。よいブラウザのために、div display:table-cellを与えることでこれを避けることができますが、泥棒のブラウザの場合はうまくいきません。

これは確かにJavascriptで実現できますが、これは重いものですが、少なくとも効果的です。この（提供MooToolsのコード）のような何か：

window.addEvent('load', function() { 
    var parentElement = $('parent_element_id'); 
    var childElement = $('child_element_id'); 

    var parentHeight = parentElement.getStyle('height'); 
    var childHeight = childElement.getStyle('height'); 

    parentElement.setStyles({ 
     'position' : 'relative' 
    }); 

    childElement.setStyles({ 
     'position' : 'absolute', 
     'top' : (parentHeight - childHeight)/2 
    }); 

});

（JSコードのテストされていないが、あなたは画像を取得します）

出典

2011-01-17 09:29:34

これは機能しませんでした。 –

JSエラーがありましたか？ –

POPUP divをDYNAMICの高さに垂直に配置する方法は？

答えて

関連する問題