Databases
StackOverflow2013
Postsdbo
POVertically centering with Tables
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POVertically centering with Tables
    text
    copied!<p>I have an iframe and a div inside a container. The two of them need to be vertically centered. After reading a few posts on tables to center, I gave it a try but to no avail. The iframe continues to stick to the top left border even though I have the iframe 'display' property set to 'table-cell' &amp; 'vertical-align' to 'middle'.</p> <p>The HTML code:</p> <pre><code>&lt;!-- the container div --&gt; &lt;div id="iframe_r_container"&gt; &lt;!-- iframe --&gt; &lt;iframe id="iframing" src="mannequin.html" frameborder="0" &gt;&lt;/iframe&gt; &lt;!--div--&gt; &lt;div id="right_container"&gt; &lt;div id="user_credit"&gt; &lt;h1&gt;&lt;a href="#"&gt;Username&lt;/a&gt;&lt;/h1&gt;&lt;br /&gt; has &lt;span id="credits"&gt;20,000&lt;/span&gt; credits. &lt;/div&gt; &lt;div&gt; &lt;button id="template_button"&gt;&lt;img src="images/Coutallure-WebApp/template_button.png" /&gt;&lt;span&gt;Templates&lt;/span&gt;&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here is the CSS:</p> <pre><code>/* 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; } </code></pre> <p>I have been stuck at this for half a day today so any help would be immensely appreciated. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload