テーブルを中心にして中心を合わせる

Question

私は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; 
} 

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

Answer 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を指定することもできます。

Answer 2

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

/* 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を中心に説明します。テストされていませんが、試してみてください。

Answer 3

コンテナに「高さ」を追加すると効果があります。あなたの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"を指定します）。

Answer 4

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