2011-02-04 21 views
0

私はiframeとdivをコンテナ内に持っています。それらの2つは、垂直方向に中心を置く必要があります。中央にテーブルのいくつかの記事を読んだ後、私はそれを試してみましたが、役に立たない。 iframeの 'display'プロパティが 'table-cell' & 'vertical-align'から 'middle'に設定されていても、iframeは左上隅に固定され続けます。テーブルを中心にして中心を合わせる

HTMLコード:

<!-- the container div --> 
<div id="iframe_r_container"> 

<!-- iframe --> 
      <iframe id="iframing" src="mannequin.html" frameborder="0" ></iframe> 

<!--div-->  <div id="right_container"> 
       <div id="user_credit"> 
        <h1><a href="#">Username</a></h1><br /> 
        has <span id="credits">20,000</span> credits. 
       </div> 

       <div> <button id="template_button"><img src="images/Coutallure-WebApp/template_button.png" /><span>Templates</span></button> </div> 
      </div> 

そして、ここでは、CSSです:

/* START OF IFRAME_R_CONTAINER */ 
#iframe_r_container { 
    position: absolute; 
    display: table; 
    top: 48px; 
    bottom: 38px; 
    width: 960px; 
} 

/* START OF IFRAME */ 
#iframing { 
    display: table-cell; 
    width: 640px; 
    height: 480px; 
    vertical-align: middle; 
} 
/* END OF IFRAME */ 


/* START OF RIGHT CONTAINER */ 
#right_container { 
     display: table-cell; 
     vertical-align: middle; 
    width: 113px; 
    margin: 20px; 
} 

任意のヘルプは非常にいただければ幸いですので、今日は半日のためにこれで立ち往生されています。

+0

私は 'display:table-cell'構造体について完全にはわかりませんが、' display:table'と 'display:table-row'に囲む必要はありませんか? –

+1

_Never_レイアウトのテーブルを使用します。表形式のデータを表示する場合のみ: – Kyle

+0

良い点カイルしかし、私はそれを把握しようとしていたので、テーブルと垂直にcentreingでStackoverflow自体を読んだ。あなたに両方に乾杯。 – Kayote

答えて

1

あなたは、テーブルセルのセンタリングとは別の技術を使用して気にしない場合、あなたはこのような何か試すことができます。

#iframe_r_container { 
    position: absolute; 
    top: 48px; 
    bottom: 38px; 
    width: 960px; 
} 

/* START OF IFRAME */ 
#iframing { 
    position: relative; 
    top: 50%; 
    margin-top: -240px; 
    width: 640px; 
    height: 480px; 
    float: left; 
} 
/* END OF IFRAME */ 


/* START OF RIGHT CONTAINER */ 
#right_container { 
    position: relative; 
    top: 50%; 
    height: 113px; 
    margin-top: -57px; 
    margin-left: 670px; 
    width: 113px; 

} 

をそれは私のFF/Macでここに動作しますが、あなたはそれをテストする必要があるだろう他のブラウザ。

#right_containerを中央に配置するには、それに高さ(ここでは113px)を与え、それに応じて負のマージントップを設定する必要があります。

ififrameがコンテナの外側にオーバーフローしないように、#iframe_r_containerに最小高さ640pxを指定することもできます。

+0

LapinLove404さん、ありがとうございました。ベスト、 – Kayote

0

は、これらの設定を試してみてください。

/* START OF IFRAME_R_CONTAINER */ 
#iframe_r_container { 
    position: absolute; 
    top: 48px; 
    bottom: 38px; 
    width: 960px; 
} 

/* START OF IFRAME */ 
#iframing { 
    width: 640px; 
    height: 480px; 
    margin: 0 auto; 
} 
/* END OF IFRAME */ 


/* START OF RIGHT CONTAINER */ 
#right_container { 
    vertical-align: middle; 
    width: 113px; 
    margin: 0 auto; 
} 

属性margin: 0 auto;(うまくいけば)コンテナ内のあなたのiframeや他のdivを中心に説明します。テストされていませんが、試してみてください。

+0

カイルに感謝、ラピンの解決策 – Kayote

1

コンテナに「高さ」を追加すると効果があります。あなたのiframeコンテナに追加するだけで、私のMacのFFで私のために働いた。

#iframe_r_container { 
    position: absolute; 
    top: 48px; 
    bottom: 38px; 
    width: 960px; 
    height:480px; 
} 

(注:Internet Explorer 8の(より高い)プロパティ値「インラインテーブル」をサポートし、「実行中」を、「テーブル」、「テーブル・キャプション」、「テーブル・セル」、 " !DOCTYPEが指定されている場合にのみ、 "table-column-group"、 "table-row-group"、 "table-row-group"、および "inherit"を指定します)。

+0

@ケビンマージン:0自動=余白なし/中央左右。 margin:親要素に高さ属性が割り当てられていない限り、auto autoは機能しません。 #iframe_r_container – Dawson

1

あなたは達成しようとしていますが、あなたの投稿を読むだけで、いくつかのalignプロパティで要素自体をセンタリングすることはできません。これは親要素のプロパティでなければなりません。あなたはそのマージンを試してみるべきです、私はこれがうまくいっていると思います。

関連する問題